asked 2 months ago
1Answers
6Views
I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.
I have tried the following:
<Image
src="/deco.svg"
alt=""
layout="fill"
/>
This snippet compiles successfully, but on the frontend, I see the following error:
Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.
This confuses me because according to the docs, these properties are not required when using layout="fill".
Use the below solution
<Image
src="url"
width={0}
height={0}
sizes="100vw"
style={{ width: '100%', height: 'auto' }} // optional
/>