Next.js 构建失败，使用 <img>标签 [英] Next.js build fails using <img> tag

问题描述

我最近开始使用 Next.js 制作网站，并且我一直将 Image 和 img 混合用于各种用例.

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

我知道 Image 内置于 Next.js 并且是更好的选择，但有些场景我不知道大小或比例我正在加载的图像，因此 img 似乎更适合.

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.

在我最近的项目中，这是我的 npm run build 命令第一次失败:

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.

我的其他 Next.js 项目不会以这种方式失败，并且使用相同的 next.config.js.有谁知道为什么会这样?

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

推荐答案

这是由于新的 Next.js 版本，它将 ESLint 与其自己的一套规则集成在一起，以强制执行 .您的其他项目不会失败，因为您可能没有使用 Next.js v11，或者他们可能有自己的 ESLint 配置，而您没有扩展 next.参考:nextjs.org/docs/basic-features/eslint

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

如果你想专门禁用文件的规则或只是一行，请执行以下操作:(如果在 VSCode 中使用 ESLint 扩展，则可以通过两次点击完成)

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

您还可以使用 .eslintrc:

You can also disable the rule using .eslintrc:

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

您还可以使用 eslintignore 或 ignorePatterns 忽略(所有规则)完整文件.请参考:eslint.org/docs/user-guide/configuring/ignoring-code

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

这篇关于Next.js 构建失败，使用 <img>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！