Next.js Discord

Discord Forum

Image Component

Answered
Arinji posted this in #help-forum
Open in Discord
ArinjiOP
what would be the alternative for <img className="w-auto h-auto" /> for the Image component?

both setting sizes or using fill causes the image to not be the actual img size

1st Image
 <div className="w-full h-full flex flex-col items-center justify-center">
      <img alt={"TEST"} src={props.src ?? "/logo.webp"} />
    </div>


2nd Image
<div className="w-full h-full flex flex-col items-center justify-center">
      <Image
        fill
        alt={"TEST"}
        className="w-auto h-auto"
        src={props.src ?? "/logo.webp"}
      />
    </div>
Answered by Arinji
 const probedImage = await probe(props.src);
  return (
    <div className="w-full h-full flex flex-col items-center justify-center">
      <Image
        src={props.src}
        alt=""
        width={probedImage.width}
        height={probedImage.height}
      />
    </div>


https://www.npmjs.com/package/probe-image-size
View full answer

34 Replies

@Ray what you wanna do?
ArinjiOP
uh lookie at first image
thats what i want
i dont wanna set the like size
ArinjiOP
:/
Ray
remove fill
ArinjiOP
but it needs something
either fill or width and height
Ray
are you importing that img?
ArinjiOP
nope, dynamic
@Arinji Click to see attachment
aardani
yeah you need to define the height in the parent component
ArinjiOP
brubv
how do i do that lol
i only get the img src from the api
aardani
like
you know the width is fixed
so then i think you can just use that and display the image
sorry ill get back to you
ArinjiOP
sure no worries, i think next image dosent support this rn
Ray
   <div className="w-full h-full flex flex-col justify-center">
        <div className="relative">
          <div className="pb-[40vh]"></div>
          <Image src={src} alt="" fill className="object-contain" />
        </div>
      </div>
try something like this
ArinjiOP
oki one sec
might have to use this
since the docs are gonna be ssg anyways
aardani
ah
i've used that before
ArinjiOP
 const probedImage = await probe(props.src);
  return (
    <div className="w-full h-full flex flex-col items-center justify-center">
      <Image
        src={props.src}
        alt=""
        width={probedImage.width}
        height={probedImage.height}
      />
    </div>


https://www.npmjs.com/package/probe-image-size
Answer
ArinjiOP
that works