useImageSize
Summary
Section titled “Summary”- Rule available since:
v2.1.4 - Diagnostic Category:
lint/nursery/useImageSize - This rule doesn’t have a fix.
- The default severity of this rule is warning.
- This rule belongs to the following domains:
- Sources:
- Same as
qwik/jsx-img
- Same as
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
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<img src="/image.png"/>code-block.jsx:1:1 lint/nursery/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/nursery/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/nursery/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/nursery/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" />How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "useImageSize": "error" } } }}