16

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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Jennifer
  • 603
  • 1
  • 7
  • 17
  • 2
    The `Image` component produces them, you cannot override that unless you fork and rebuild the component for yourself. The best would be to increase specificity of your css style. – Badal Saibo Dec 03 '21 at 06:38
  • 2
    @BadalSaibo Thank you for your reply! Its really bad how Next implemented image component – Jennifer Dec 03 '21 at 07:04
  • use can use `dangerouslysetinnerhtml` attribute to solve this – Mirza Irtiza Jan 14 '22 at 19:45

4 Answers4

13

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" 
/>
juliomalves
  • 42,130
  • 20
  • 150
  • 146
0

Faced a similar problem while migrating from nextjs-11 to nextjs-12. Nextjs 12 uses a span instead of a div so just update your CSS file

.myImg > span {
//Your CSS 
}
vyshakha
  • 17
  • 4
  • 3
    Just changing up the CSS is NOT ENOUGH. These spans come with built-in inline style. Selecting by tag name in CSS does not work for this reason. (I tried it before looking for a way to get rid of the spans) – GiselleMtnezS Jul 06 '22 at 18:56
  • This *does* work but you need to specify `!important` on any styles that the span already has, so that they cannot be overridden by the built-in inline styles. Hacky but better than enabling experimental features IMO – xaphod Oct 14 '22 at 20:27
0

Here's what to do if you are using newer Next JS

in components:

import Image from "next/future/image";

in next.config.js:

const nextConfig = {
  ...
  experimental: {
    images: {
      allowFutureImage: true,
    },
  },
};

Happy Coding!

Irwan
  • 104
  • 8
-1

If you want to do some custom styling on your img tag, use the following CSS trick:

index.jsx:

<div className={classes.imageWrapper}>
   <Image
     width={"42"}
     height={"42"}
     src={"/images/profile/mock-face-2.jpg"}
     alt="mock profile picture"
   />
 </div>

styles.module.css:

.imageWrapper img {
    border-radius: 50%;
}
Mohammad Hossein Ashoori
  • 1
  • 2
  • You do not need to put a wrapper around `Image`, you can simply write styles in a `className` and these styles will be applied in the `img` element. – bzin May 29 '22 at 09:36