---
url: /docs/guide/usage/linter/rules/nextjs/no-img-element.md
---

### 作用

防止使用 `<img>` 元素，因为它会导致更慢的
[LCP](https://nextjs.org/learn/seo/lcp) 和更高的带宽消耗。

### 为什么这不好？

`<img>` 元素未针对性能进行优化，可能会导致
更慢的 LCP 和更高的带宽消耗。使用来自
`next/image` 的 [`<Image />`](https://nextjs.org/docs/pages/api-reference/components/image)
会自动优化图像并将其作为静态资源提供。

### 示例

此规则的**错误**代码示例：

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

此规则的**正确**代码示例：

```javascript
import Image from "next/image";
import testImage from "./test.png";
export function MyComponent() {
  return (
    <div>
      <Image src={testImage} alt="Test picture" />
    </div>
  );
}
```

## 如何使用

## 版本

此规则于 v0.2.0 中新增。

## 参考资料