24

我知道在 Next.js 中我们有 Image 组件,但我遇到的问题是我不能将它用作普通的 HTML 标记,如<img />. 我必须给它一个布局,但是没有选项可以将它作为一个普通的 HTML 标签来控制,除此之外,我不能对它使用成帧器动作。

所以我刚刚安装了next-images,所以我当然可以导入图像并使用它们,一切正常,直到我 npm run build 登录页面看到一些结果,并且有这个警告:

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正常使用标签?

4

2 回答 2

72

从 Next.js 11 开始,ESLint 支持开箱即用,现在提供了一组新规则,包括@next/next/no-img-element规则。

您可以在.eslintrc文件中禁用此特定 ESLint 规则,就像任何其他规则一样。

{
  // ...
  "rules": {
    // Other rules
    "@next/next/no-img-element": "off"
  }
}
于 2021-07-02T11:37:45.633 回答
1

执行错误消息告诉您的操作:

导入 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

于 2021-10-13T08:25:30.487 回答