当layout=填充下一个/图像时，我能得到宽度值吗

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