← Back to rules

nextjs/no-img-element 正确性

An auto-fix is available for this rule.

它的作用

由于较慢的 LCP 以及更高的带宽消耗，禁止使用 <img> 元素。

为什么这是不好的？

<img> 元素未针对性能进行优化，可能导致更慢的 LCP 以及更高的带宽使用。使用 next/image 提供的 <Image /> 可以自动优化图片，并将其作为静态资源提供。

示例

此规则的 错误 代码示例：

export function MyComponent() {
  return (
    <div>
      <img src="/test.png" alt="测试图片" />
    </div>
  );
}

此规则的 正确 代码示例：

import Image from "next/image";
import testImage from "./test.png";
export function MyComponent() {
  return (
    <div>
      <Image src={testImage} alt="测试图片" />
    </div>
  );
}

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-img-element": "error"
  }
}

CLI

oxlint --deny nextjs/no-img-element --nextjs-plugin

参考资料

• 规则源码