下一篇.js使用标签构建失败<img>

Question

我最近开始使用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。有人知道为什么会发生这种事吗？

Answer 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