useImageSize
¥Summary
-
规则生效日期：
v2.1.4¥Rule available since:
v2.1.4 -
诊断类别：
lint/correctness/useImageSize¥Diagnostic Category:
lint/correctness/useImageSize -
此规则没有修复方案。
¥This rule doesn’t have a fix.
-
此规则的默认严重级别为 error。
¥The default severity of this rule is error.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
-
与
qwik/jsx-img相同¥Same as
qwik/jsx-img
-
¥How to configure
{ "linter": { "rules": { "correctness": { "useImageSize": "error" } } }}¥Description
强制 <img> 元素同时具有 width 和 height 属性。
¥Enforces that <img> elements have both width and height attributes.
此规则确保 <img> 元素具有 width 和 height 属性。
¥This rule ensures that <img> elements have width and height attributes.
未指定宽度和高度的图片可能会导致布局偏移，因为浏览器无法确定为其预留多少空间，从而导致糟糕的用户体验。建议始终包含这些属性以避免此类问题。
¥Images without specified width and height can cause layout shifts as the browser does not know how much space to reserve for them, leading to a poor user experience. It’s recommended to always include these attributes to prevent such issues.
¥Examples
¥Invalid
<img src="/image.png"/>code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing width or height attribute on img element.
> 1 │ <img src=“/image.png”/>
│ ^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes
<img src="/static/images/portrait-01.webp"/>code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing width or height attribute on img element.
> 1 │ <img src=“/static/images/portrait-01.webp”/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes
<img src="/image.png" width="200"/>code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing width or height attribute on img element.
> 1 │ <img src=“/image.png” width=“200”/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes
<img src="/image.png" height="200"/>code-block.jsx:1:1 lint/correctness/useImageSize ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Missing width or height attribute on img element.
> 1 │ <img src=“/image.png” height=“200”/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Without explicit dimensions, images cause layout shifts (CLS) when loading, harming user experience and SEO.
ℹ Learn why this matters: web.dev: Image Dimensions, MDN: img attributes
¥Valid
<img width="200" height="600" src="/static/images/portrait-01.webp" /><img width="100" height="100" src="https://example.com/image.png" />¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号