3

I've been working on nextjs for the first time and I came across this thing. When I use the image tag to add an image file to my web page, it automatically wraps the inside the wrapper and adds inline CSS to it. Is there a way to remove that wrapper?

My code looks like this:-

<div className="imageContainer"> 
 <Image height="600px" width="600px" src="/images/heroImageIndex1.png"/>

And the result looks something like this:-

<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><span style="box-sizing: border-box; display: block; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%;"><img alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27600%27%20height=%27600%27/%3e" style="display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"></span>`<img src="/_next/image?url=%2Fimages%2FheroImageIndex1.png&amp;w=1200&amp;q=75" decoding="async" data-nimg="intrinsic" 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%" srcset="/_next/image?url=%2Fimages%2FheroImageIndex1.png&amp;w=640&amp;q=75 1x, /_next/image?url=%2Fimages%2FheroImageIndex1.png&amp;w=1200&amp;q=75 2x"><noscript><img sizes="100vw" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroImageIndex1.d31866d5.png&amp;w=3840&amp;q=75" decoding="async" data-nimg="responsive" 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%" loading="lazy"/></noscript></span>`
Mandar Sapre
  • 31
  • 2
  • Does this answer your question: [How to remove the wrapper spans from next/image in Next.js?](https://stackoverflow.com/questions/70210003/how-to-remove-the-wrapper-spans-from-next-image-in-next-js)? Use `layout="raw"` on the `next/image`. – juliomalves Apr 29 '22 at 19:43

1 Answers1

0

There is no such possibility with the default next.js Image component. You can only make your own custom component or use a third party library

Oleg Om
  • 429
  • 5
  • 15