1.9 KiB
1.9 KiB
No img element
Prevent usage of
<img>element to prevent layout shift and favor optimized images.
Why This Error Occurred
An <img> element was used to display an image.
Possible Ways to Fix It
Use next/image to improve performance with automatic Image Optimization.
Note: If deploying to a managed hosting provider, remember to check pricing since optimized images might be charged differently than the original images. If self-hosting, remember to install
sharpand check if your server has enough storage to cache the optimized images.
import Image from 'next/image'
function Home() {
return (
<Image
src="https://example.com/hero.jpg"
alt="Landscape picture"
width={800}
height={500}
/>
)
}
export default Home
If you would like to use next/image features such as blur-up placeholders but disable Image Optimization, you can do so using unoptimized.
Or, use a <picture> element with the nested <img> element:
function Home() {
return (
<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"
alt="Landscape picture"
width={800}
height={500}
/>
</picture>
)
}