错误：不要使用<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