Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components )

Question

I know that in Next.js we have Image component, but the problem I have with it is that I can't use it as a normal HTML tag like <img />. I have to give it a layout, but there's no option to control it as a normal HTML tag, and besides that, I can't use framer motion with it.

So I just installed next-images so I can import images and use them of course, and everything works fine, 'till I npm run build the landing page to see some results, and there's this warning:

Failed to compile.

./components/Presentation/Presentation.js
77:13  Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.  @next/next/no-img-element

Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

npm ERR! code ELIFECYCLE

This is where I'm using img tag with styled components:

<PresentationUnderText2 src="/underText-Presentation.png" alt="" />
<PresentationScissor2   src="/scissors.svg"alt=""/>

What can I do to use img tag as normal?

Solution 1

From Next.js 11, ESLint is supported out-of-the-box and a new set of rules is now provided, including the @next/next/no-img-element rule.

You can disable this specific ESLint rule, like any other rule, in your .eslintrc file.

{
  // ...
  "rules": {
    // Other rules
    "@next/next/no-img-element": "off"
  }
}

Solution 2

I do not have .eslintrc file. instead I place this line at the top of the page or component

/* eslint-disable @next/next/no-img-element */

Comments

[Diego]

Thanks for the answer, yesterday, i finally decided to use Img component as a part of my project, but if i ever need this i'll try it out !

[Dastan]

I did this, fixed it for the development environment. But still get the error in production

[juliomalves]

@Pengin At what point do you get the error in production? If you run npm build locally, can you replicate the issue? If not, then your .eslintrc file is probably not being read correctly in the production environment for some reason.

[Dastan]

that's right, but I don't know why it wasn't read when I deployed on Vercel. On my local machine, npm run build worked fine though. Deleted .eslintrc and it worked fine on production too.

[John Miller]

You didn't actually read what the poster said. Next's Image tag is not compatible with Framer Motion or any other solution that either asks for an <img> or requires customization of an <img>, so your "solution" to just use <Image> is not good.

[Sam Parmenter]

Its also got some serious serious issues with taking a crazy amount of time to generate the resizes required at times. There are very legitimate reasons to not want to use the Next built in image component.

[Wizard]

and youre forced to use attributes like width and height or fill which never work the way you want them too. To use these attributes would be to imply that we know the exact size of the img we are trying to use, but in reality we don't and that's why the Image tag doesn't work most of the time