布局=填充下一个/图像时，我可以获得宽度值吗？

Posted 2023-03-06

【中文标题】布局=填充下一个/图像时，我可以获得宽度值吗？

【英文标题】：Can I get width value when layout=fill in next/image?

【发布时间】：2021-08-09 14:25:56

【问题描述】：

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

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

我想把这个 img 的宽度和高度值传递给组件。

我可以从中获得价值吗？

【参考方案1】：

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

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

    return (
      <>
        <Image
            
            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 />
      </>
    );
;