Next.js 为什么next/image会生成内联样式来重置css？

我打算使用next/image来优化我网站上的图像。但是，在构建项目之后，我的所有图像都会获得一个样式属性，该属性似乎是重置样式。 我是React和Next.js的新手，我似乎找不到有同样问题的人

这是我的下一张/图片：

<Image src="/images/KontacktPhoto.jpg"
    loading="lazy"
    id="w-node-c2896189-6d63-ce1c-bac3-f0aee0dcc9c2-e0dcc9be"
    alt
    className="image-4"
    layout="fill"
/>

<img id=”myPic” src="/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=3840&amp;q=75" decoding="async" class="image-4" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" sizes="100vw" srcset="/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=3840&amp;q=75 3840w">

style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"

我知道这可能是next/image的一项功能，可使内置“布局”属性正常工作。但是，如果在浏览器中手动删除“样式”属性，则图像似乎显示正确

---

有没有办法让next/image知道我不想要这个样式属性？

似乎没有内置的方法来做到这一点-。您试图将什么样式应用于图像？您是否尝试过添加一个包装器

div

并对其进行样式设置？是的，将样式添加到div包装器可能会起作用，但我不明白的是，为什么next/image首先要添加此样式覆盖？我看到的将样式添加到包装器的唯一问题是，我应用于img标记本身的所有全局样式都将被忽略。这是一个问题的原因，因为我正在构建一个自动的html到nextjs转换器。如果只是针对单个项目，这将不是一个问题：/添加div包装来覆盖图像样式将不起作用，因为您处理的是内联样式。试着看看CSS的特殊性。