layout=fill in next/image 时可以得到宽度值吗？

Question

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

我用 next/image 创建了一个简单的组件。

我想将此 img 的宽度和高度值传递给组件。

我可以从中获得价值吗？

Answer 1

您可以在图像加载后在 onLoad 回调中获取图像的 width/height 值。

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} />}
      </>
    );
};