Image with src has either width or height modified, but not the other.
Unanswered
Cuban Crocodile posted this in #help-forum
Cuban CrocodileOP
Image with src has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
I got this warning when i wanna set image width to "auto". how to get rid of this warning? i already set both width and height in style prop
my component usage looking like this:
<Image
width={250}
height={100}
className={classes.icon}
priority
style={{ height: 100, width: "auto" }}
src={image_url}
alt={title ?? "game image"}
/>
I got this warning when i wanna set image width to "auto". how to get rid of this warning? i already set both width and height in style prop
my component usage looking like this:
<Image
width={250}
height={100}
className={classes.icon}
priority
style={{ height: 100, width: "auto" }}
src={image_url}
alt={title ?? "game image"}
/>
5 Replies
Tree Swallow
try this!
style={{objectFit: 'contain'}}
😋
is this a bit more smart code?
Chinese Alligator
I'm also looking for how to resolve this warning, I'm doing the same thing except
https://nextjs.org/docs/pages/building-your-application/optimizing/images
Optimizing -> Images says "automatically provided" however when I use this example I get this error:
height: 'auto' did you figure it out?https://nextjs.org/docs/pages/building-your-application/optimizing/images
Optimizing -> Images says "automatically provided" however when I use this example I get this error:
Error: Image with src "/logo.png" is missing required "width" property.
<Image
...
// width={500} automatically provided
// height={500} automatically provided
...
/>