I’m intending to use next/image to optimize the images on my site. However, after building the project, all of my images are getting a style attribute with what seems to be reset styling. I’m new to React and Next.js and I can't seem to find anyone with the same problem.
This is my next/image:
<Image src="/images/KontacktPhoto.jpg"
loading="lazy"
id="w-node-c2896189-6d63-ce1c-bac3-f0aee0dcc9c2-e0dcc9be"
alt
className="image-4"
layout="fill"
/>
and this is the image that is rendered in the browser:
<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">
As you can see next/image has added this style attribute to the 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%"
I understand that this may be a feature of next/image to make the built in 'layout' property work properly. However if I manually remove the style attribute in the browser, the image seems to be displaying correctly.
Is there any way to let next/image know that I don’t want this style attribute?