Next.js build fails using <img> tag

Question

I recently started making websites with Next.js, and I have been using a mix of Image and img for various use cases.

I know that Image is built-in to Next.js and is the better choice, but there are scenarios where I do not know the size or the ratio of the images I am loading, and thus the img seems to better suit.

During my recent project, this is the first time my npm run build command is failing with:

1:7  Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.

My other Next.js projects do not fail this way, and use the same next.config.js . Does anyone know why this is happening?

Answer 1

This is due to the new Next.js release, which has integrated ESLint with its own set of rules to enforce that <Image> should always be used. Your other projects don't fail because probably you are not using Next.js v11, or they may have their own ESLint config, where you haven't extended next . Ref.: nextjs.org/docs/basic-features/eslint

You can ignore linting during build by this:

// next.config.js

module.exports = {
  eslint: { ignoreDuringBuilds: true },
  // your other settings here ...
}

If you want to specifically disable the rule for a file or just a line do this: (can be done in two clicks if using ESLint extension in VSCode)

{/* eslint-disable-next-line @next/next/no-img-element */}
<img ... //>

// for whole file, add this to top:

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

// for a section:

/* eslint-disable @next/next/no-img-element */
// your code here...
/* eslint-enable @next/next/no-img-element */

You can also disable the rule using .eslintrc :

{
  "extends": "next",
  "rules": {
    "@next/next/no-img-element": "off",
  }
}

You can also ignore (all rules for) a complete file using eslintignore or ignorePatterns . Please refer: eslint.org/docs/user-guide/configuring/ignoring-code