43

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?

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
Diego
  • 421
  • 3
  • 9
  • 34

4 Answers4

126

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

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 */
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
4

If you want to use img tag in your project, you can disable the no-img-element ESLint rule that is causing the error by adding the following configuration to your .eslintrc.js file:

module.exports = {
  rules: {
   "@next/next/no-img-element": "off",
  },
};

Although, I would recommend using the Image component instead as it provides several benefits such as automatic optimization, responsive images, and better performance.

To use framer-motion with the Image component, you can wrap it in a motion component like this:

import Image from 'next/image';
import {motion} from 'framer-motion';

const componentName = () => {
  return (
   <motion.div>
     <Image src="/my-image.png" alt="my-image" width={500} height={500} />
   </motion.div>
  );
};
Anurag Tripathi
  • 784
  • 1
  • 13
  • 13
-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

Julian
  • 4,396
  • 5
  • 39
  • 51
  • 15
    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 or requires customization of an , so your "solution" to just use is not good. – John Miller Dec 20 '21 at 19:27
  • 6
    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. – Sam Parmenter Dec 31 '21 at 14:10
  • 7
    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 – Wizard Mar 16 '22 at 18:01
  • Thank you, guys for pointing all these out. I thought it was just me. I secretly think I couldn't use the Image component properly. I experience all the problems you guys mentioned here, and have to come up with css overrides, and other wecky solutions to "fix" my Image component. – Tom May 16 '23 at 10:44