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?

juliomalves · Accepted Answer · 2021-07-10 00:07:00Z

148

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

edited Jul 10, 2021 at 0:07

answered Jul 2, 2021 at 11:37

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James0r Over a year ago

For me, I had to reload VS Code or Restart Extension Host to get the warning to disappear.

Yilmaz · Accepted Answer · 2022-04-30 20:19:54Z

17

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

answered Apr 30, 2022 at 20:19

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Comments

Anurag Tripathi · Accepted Answer · 2023-03-18 06:07:45Z

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>
  );
};

Jason R Stevens CFA · Accepted Answer · 2025-01-16 22:35:11Z

This answer is very similar to the others provided but gives the full configuration file since Next.js and Eslint moved to the flat configuration file.

This is what I use w/a Next.js + TypeScript project.

// eslint.config.mjs
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@next/next/no-img-element": "off",
    },
  },
];

export default eslintConfig;

And a link to the eslint documentation for the configuration file.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related