useImageSize
Ta treść nie jest jeszcze dostępna w Twoim języku.
Summary
Section titled “Summary”- Rule available since:
v2.1.4 - Diagnostic Category:
lint/correctness/useImageSize - This rule doesn’t have a fix.
- The default severity of this rule is error.
- This rule belongs to the following domains:
- Sources:
- Same as
qwik/jsx-img
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "correctness": { "useImageSize": "error" } } }}Description
Section titled “Description”Enforces that <img> elements have both width and height attributes.
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
Section titled “Examples”Invalid
Section titled “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
<img width="200" height="600" src="/static/images/portrait-01.webp" /><img width="100" height="100" src="https://example.com/image.png" />Related links
Section titled “Related links”Copyright (c) 2023-present Biome Developers and Contributors.