如何解决为什么 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&w=3840&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&w=640&q=75 640w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=750&q=75 750w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=828&q=75 828w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=1080&q=75 1080w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=1200&q=75 1200w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=1920&q=75 1920w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=2048&q=75 2048w,/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&w=3840&q=75 3840w">
如您所见,next/image 已将此样式属性添加到图像中:
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 知道我不想要这个样式属性?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。