为什么 next/image 会生成重置我的 CSS 的内联样式?

Aug*_*ski 5 next.js nextjs-image

I\xe2\x80\x99m 打算使用 next/image 来优化我网站上的图像。然而,在构建项目后,我的所有图像都获得了一个似乎重置样式的样式属性。 \nI\xe2\x80\x99m 是 React 和 Next.js 的新手,我似乎找不到任何具有该属性的人同样的问题。

\n

这是我的下一个/图片:

\n
<Image src="/images/KontacktPhoto.jpg"\n    loading="lazy"\n    id="w-node-c2896189-6d63-ce1c-bac3-f0aee0dcc9c2-e0dcc9be"\n    alt\n    className="image-4"\n    layout="fill"\n/>\n
Run Code Online (Sandbox Code Playgroud)\n

这是在浏览器中呈现的图像:

\n
<img id=\xe2\x80\x9dmyPic\xe2\x80\x9d 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">\n
Run Code Online (Sandbox Code Playgroud)\n

可以看到 next/image 给图片添加了这个样式属性:

\n
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%"\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n

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

\n