noImgElement
¥Summary
-
规则生效日期：
v1.9.4¥Rule available since:
v1.9.4 -
诊断类别：
lint/performance/noImgElement¥Diagnostic Category:
lint/performance/noImgElement -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 warning。
¥The default severity of this rule is warning.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
-
与
@next/next/no-img-element相同¥Same as
@next/next/no-img-element
-
¥How to configure
{ "linter": { "rules": { "performance": { "noImgElement": "error" } } }}¥Description
防止在 Next.js 项目中使用 <img> 元素。
¥Prevent usage of <img> element in a Next.js project.
使用 <img> 元素可能会导致最大内容绘制 (LCP) 速度变慢和带宽使用量增加，因为它缺少 <Image /> 组件（来自 next/image）提供的优化。Next.js 的 <Image /> 组件通过提供响应式尺寸和使用现代格式自动优化图片，从而提高性能并降低带宽占用。
¥Using the <img> element can result in slower Largest Contentful Paint (LCP)
and higher bandwidth usage, as it lacks the optimizations provided by the <Image />
component from next/image. Next.js’s <Image /> automatically optimizes images
by serving responsive sizes and using modern formats, improving performance and reducing bandwidth.
如果你的项目是自托管的，请确保你有足够的存储空间，并且已安装 sharp 包以支持优化图片。部署到托管主机提供商时，请注意可能产生的额外费用或使用量。
¥If your project is self-hosted, ensure that you have sufficient storage and have
installed the sharp package to support optimized images. When deploying to managed
hosting providers, be aware of potential additional costs or usage.
¥Examples
¥Invalid
<img alt="Foo" />code-block.jsx:1:1 lint/performance/noImgElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Don’t use <img> element.
> 1 │ <img alt=“Foo” />
│ ^^^^^^^^^^^^^^^^^
2 │
ℹ Using the <img> can lead to slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images.
<div> <img alt="Foo" /></div>code-block.jsx:2:3 lint/performance/noImgElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Don’t use <img> element.
1 │ <div>
> 2 │ <img alt=“Foo” />
│ ^^^^^^^^^^^^^^^^^
3 │ </div>
4 │
ℹ Using the <img> can lead to slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images.
¥Valid
<img /><Image src="https://example.com/hero.jpg" /><picture> <source srcSet="https://example.com/hero.avif" type="image/avif" /> <source srcSet="https://example.com/hero.webp" type="image/webp" /> <img src="https://example.com/hero.jpg" /></picture>¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号