Next.js 使用 <img> 标签构建失败

Posted 2023-02-22

【中文标题】Next.js 使用 <img> 标签构建失败

【英文标题】：Next.js build fails using <img> tag

【发布时间】：2021-09-11 03:48:32

【问题描述】：

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

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

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

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。有谁知道为什么会这样？

【问题讨论】：

这能回答你的问题吗？ Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components )

【参考方案1】：

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

您可以通过以下方式在构建期间忽略掉毛：

// next.config.js

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

如果你想专门禁用一个文件或一行的规则，请执行以下操作：（如果在 VSCode 中使用 ESLint 扩展，可以单击两次完成）

/* 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 禁用该规则：

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

您也可以使用eslintignore 或ignorePatterns 忽略（所有规则）完整文件。请参考：eslint.org/docs/user-guide/configuring/ignoring-code

【讨论】：

太棒了 - 这很有效，谢谢你的回答！