为什么当我尝试在 react.js 中获取图像的高度和宽度时它返回未定义

Question

我正在尝试将图像的高度和宽度值记录到 react.js 中的控制台，但它们（由于某种原因）未定义。 你知道为什么吗？

这是代码：

export default function FilmPage(props) {
    const getImgSize = (img) => {
        let imageEl = <img onLoad={()=>{
            console.log(imageEl.width)
            console.log(imageEl.height)
        }} src={img} />

        return imageEl
    }
    
    return (
        <div className="proper-film">
            <div className="body">
                <div>{getImgSize(props.data.image)}</div>
            </div>
        </div>
    )

}

而且我检索的数据看起来像这样：

data = {
    some: null,
    other: null,
    stuff: null,  
    image: "https://my_api.com/images/original/picture.jpg",
    and_more: null
}

顺便说一句，当我尝试调试时，我检索到的数据没有问题。

你会推荐什么？

Answer 1

您可以修改getImgSize方法，如下所示

const getImgSize = (img) => {
    return <img onLoad={(e) => {
      console.log(e.target.offsetHeight)
      console.log(e.target.offsetWidth)
    }} src={img} />


  }

https://codesandbox.io/s/xenodochial-borg-x474m?file=/src/App.js