CODEWITHSUNDEEP
javascriptreactjsnext.jsnextjs-image
popo
popo

Reputation: 89

Can I get width value when layout=fill in next/image?

<Image
    alt="image_example"
    src="/image_example.png"
    layout="fill"
    objectFit="none"
/>
<Test width={?} height={?}/>

I created a simple component with next/image.

I wanna pass on the width and height values of this img to the component.

Is there a value I can get from ?

Upvotes: 1

Views: 96

Answers (1)

juliomalves
juliomalves

Reputation: 50248

You can get the width/height values of the image on the onLoad callback, after the image has been loaded.

const CustomComponent = (props) => {
    const [imgDimensions, setImgDimensions] = useState();

    return (
      <>
        <Image
            alt="image_example"
            src="/image_example.png"
            layout="fill"
            objectFit="none"
            onLoad={(e) => {
                const { height, width } = e.target;
                setImgDimensions({ width, height })
            }}
        />
        {imgDimensions && <Test width={imgDimensions.width} height={imgDimensions.height} />}
      </>
    );
};

Upvotes: 1

Related Questions