How to remove the wrapper spans from next/image in Next.js?

Question

I'm leaning Next.js and I have found that next/image is wrapping the img with two spans and adding inline style to the img tag which overriding my class style

How can I remove the inline style and the wrapper HTML tags like spans and divs?

My code looks like

import Image from 'next/image';
<Image className={'imgBack'} src={myImg} width="160" height="160" alt="" />

Result

<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: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
    <img alt="" src="/_next/image?url=%sq=75" decoding="async" data-nimg="intrinsic" class="imgBack" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;" srcset="/_next/image?url=%2F_next%s;q=75 1x, /_next/image?url=%2F_next%s;q=75 2x">
    </span>
<span>

Expected result

<img src="./myImg" class="imgBack" alt="" width="160" height="160" />

I have read the next/image document and I couldn't find a way to fix that.

Answer 1

Using next/future/image

Note: In Next.js 13, next/future/image has been converted to next/image, the above is no longer an issue.

From Next.js 12.3, you can use the new next/future/image component, which renders a single <img> element without any additional <div> or <span> wrappers by default.

Note that in Next.js 12.2.x the next/future/image component was still experimental, and required to be enabled in next.config.js.

module.exports = {
    experimental: {
        images: {
            allowFutureImage: true
        }
    },
    // Rest of the config
}

---

Using next/image with layout="raw"

Before version 12.2.0 and from 12.1.1, it's possible to render the image without wrappers or styling using the experimental layout="raw" mode.

To enable the raw layout mode, add the following to your next.config.js:

module.exports = {
    experimental: {
        images: {
            layoutRaw: true
        }
    },
    // Rest of the config
};

Then use layout="raw" in the Image component.

<Image 
    className="imgBack" 
    src={myImg} 
    width="160" 
    height="160" 
    alt="" 
    layout="raw" 
/>