错误：不要使用 <img>。改用“下一个/图像”中的图像。- Next.js 使用 html 标签 <img /> （带样式组件）

Question

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

所以我刚刚安装，next-images所以我当然可以导入图像并使用它们，一切正常，直到我 npm run 构建登录页面以查看一些结果，并且有以下警告：

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

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

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

尽管如此，我还是建议使用该Image组件，因为它提供了多种好处，例如自动优化、响应式图像和更好的性能。

要framer-motion与该Image组件一起使用，您可以将其包装在一个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>
  );
};