為什么當我嘗試在 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