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