[Solved] Error: Do not use <img>. Use Image from 'next/image' instead - Next.js

Problem:

You know that Next.js has an image component and you can't use it as a normal HTML tag like <img />

I have installed "next-images" to display the image after then run "npm run build"  got this warning:

Failed to compile.

./components/Book.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

Solution 1:

ESLint is no longer supported from Next.js 11. Instead of this, you can declare a new rule on your .eslintrc file.

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

Solution 2:

If you don't want to see any warning, you can follow this solution. You can add these line on next.config.js

const withImages = require('next-images')
module.exports = withImages()

Component code example

import img from './my-image.jpg';
export default () => <div>
  <img src={img} />
</div>

That’s all for now! We hope this has cleared up some confusion about the most common NextJS error out there. Let us know in the contact section if you have experienced this error in your applications!