錯誤：不要使用<img> . 請改用“下一個/圖像”中的圖像。 - Next.js 使用 html 標簽<img> （帶有樣式組件）

Question

我知道在 Next.js 中我們有圖像組件，但我遇到的問題是我不能將它用作普通的 HTML 標簽，如<img /> 。 我必須給它一個布局，但沒有選項可以將它作為普通的 HTML 標簽進行控制，除此之外，我不能對它使用 framer motion。

所以我剛剛安裝了next-images這樣我就可以導入圖像並當然使用它們，一切正常，直到我 npm 運行構建登陸頁面以查看一些結果，並且有這個警告：

Failed to compile.

./components/Presentation/Presentation.js
77:13  Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.  @next/next/no-img-element

Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

npm ERR! code ELIFECYCLE

這是我使用帶樣式組件的img標簽的地方：

<PresentationUnderText2 src="/underText-Presentation.png" alt="" />
<PresentationScissor2   src="/scissors.svg"alt=""/>

我該怎么做才能正常使用img標簽？

Answer 1

從 Next.js 11 開始， ESLint 支持開箱即用，現在提供了一組新規則，包括@next/next/no-img-element規則。

您可以在.eslintrc文件中禁用此特定 ESLint 規則，就像任何其他規則一樣。

{
  // ...
  "rules": {
    // Other rules
    "@next/next/no-img-element": "off"
  }
}

Answer 2

我沒有.eslintrc文件。 相反，我將此行放在頁面或組件的頂部

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

Answer 3

執行錯誤消息告訴您的操作：

導入 NextJS 圖像組件：

import Image from 'next/image';

然后在您的代碼中找到您的 img 組件：

<img src={my_awesome_source}/>

然后將其替換為 NextJS 圖像組件：

<Image src={my_awesome_source}/>

請參閱： https : //nextjs.org/docs/messages/no-img-element