nextjs/no-img-element Correctness
作用
由于更慢的 LCP 和更高的带宽，禁止使用 <img> 元素。
为什么这不好？
<img> 元素未针对性能进行优化，可能会导致 更慢的 LCP 和更高的带宽。使用来自 next/image 的 <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>
);
}如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-img-element": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["nextjs"],
rules: {
"nextjs/no-img-element": "error",
},
});bash
oxlint --deny nextjs/no-img-element --nextjs-plugin版本
此规则于 v0.2.0 中新增。