错误：不要使用 <img> 标签。请改用来自 'next/image' 的 Image 组件。- Next.js 使用带有 styled components 的 html 标签 <img />。

Question

我知道在 Next.js 中有 Image 组件，但我遇到的问题是我不能像使用普通 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

这是我在使用styled components时使用img标签的地方：

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

如何使img标签正常工作？

- Diego

Answer 1

从Next.js 11开始，ESLint已经被支持，并提供了一组新的规则，其中包括@next/next/no-img-element规则。

您可以像其他规则一样，在您的.eslintrc文件中禁用此特定的ESLint规则。

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

- juliomalves

Answer 2

我没有.eslintrc文件。相反，我将此行放在页面或组件的顶部。

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

- Yilmaz

Answer 3

如果您想在项目中使用img标签，可以通过将以下配置添加到您的.eslintrc.js文件中来禁用导致错误的no-img-element ESLint规则：

module.exports = {
  rules: {
   "@next/next/no-img-element": "off",
  },
};

虽然我建议使用Image组件，因为它提供了多个好处，如自动优化、响应式图像和更好的性能。

要在Image组件中使用framer-motion，可以像这样将其包装在motion组件中：

import Image from 'next/image';
import {motion} from 'framer-motion';

const componentName = () => {
  return (
   <motion.div>
     <Image src="/my-image.png" alt="my-image" width={500} height={500} />
   </motion.div>
  );
};

- Anurag Tripathi

Answer 4

按照错误信息所提示的做：

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

- Julian

---

你没有真正读懂发帖者说的话。Next的图像标签与Framer Motion或任何其他需要<img>标签或需要自定义<img>的解决方案都不兼容，因此你所提出的“解决方案”只是使用<Image>并不好。 - John Miller

它还存在一些严重的问题，有时需要花费很长时间来生成所需的调整大小。有非常合理的理由不想使用Next内置的图像组件。 - Sam Parmenter

你被迫使用像宽度、高度或填充这样的属性，但它们从来没有按照您想要的方式工作。使用这些属性将意味着我们知道我们正在尝试使用的图像的确切大小，但实际上我们并不知道，这就是为什么 Image 标记大多数情况下无法正常工作的原因。 - Wizard

谢谢大家指出这些问题。我以为只有我遇到这个问题。我私下认为我可能无法正确使用图像组件。我经历了你们在这里提到的所有问题，不得不想出一些 CSS 覆盖和其他奇怪的解决方案来“修复”我的图像组件。 - Tom