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?

Answer 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"
  }
}

Answer 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 */

Answer 3

Do what the error message tell you to do:

Import the NextJS Image Component:

import Image from 'next/image';

Then find your img component in your code:

<img src={my_awesome_source}/>

Then replace it with the NextJS Image Component:

<Image src={my_awesome_source}/>

See: https://nextjs.org/docs/messages/no-img-element