Next Image loading wrong image from imgset, is not responsive
Unanswered
Southeastern blueberry bee posted this in #help-forum
Southeastern blueberry beeOP
I have exact same error as this guy: https://github.com/vercel/next.js/issues/37500
I set it like this and it loads image too small, I tried other things, such as "fill", object contain etc. Fill works but it gives me biggest image possible, if I add parent div with width, height and position relative it also gives me small image (good width, bad height).
<Image
src={profile.avatar_url ?? emptyAvatar}
alt="Profile"
className="w-[120px] h-[120px] rounded-full"
width={120}
height={120}
/>
I set it like this and it loads image too small, I tried other things, such as "fill", object contain etc. Fill works but it gives me biggest image possible, if I add parent div with width, height and position relative it also gives me small image (good width, bad height).
<Image
src={profile.avatar_url ?? emptyAvatar}
alt="Profile"
className="w-[120px] h-[120px] rounded-full"
width={120}
height={120}
/>
9 Replies
Southeastern blueberry beeOP
Fixed this myself
Did you try removing the w-[120px] h-[120px] ?
Southeastern blueberry beeOP
yes, i also tried having relative parent with set height and children with absolute h-full w-full, none of this worked because of the issue i posted above
Southeastern blueberry beeOP
im reopening it
there must be some normal way
of telling nextjs to get image by smaller value (width/height)
without 100 lines of custom code to load image, calculate aspect ratio, get back with it and load image again