react 图片加载完前 如何获取正确的高度?

把获取高度的事件写在img的onLoad中,如果图片过大,事件延迟很严重,怎么解决?

把获取高度的函数放在componentDidMount()中,不能获取到正确的高度(图片还没加载完)

怎么解决?

阅读 12.1k
8 个回答

先默认设置一直图片,等图片加载完替换掉不行吗

没有加载完的img,不存在什么宽高。

通常可行的办法,直接在css中定宽度高度

{
width:725,
height:350,
src:"192.168.31.154:1234/logo.png",
name:"通用logo"
}
酱紫能满足你需求了不

如果是你自己的服务器,可以在返回图片的时候把宽高都返回出来,就没什么问题了。

如果是其他地方的图片就不太好处理了,你可以统一定一下高度,宽度自适应

<img src={''} onLoad={e => {
    console.log(e.target.height);
}}/>

看看是不是你要的值。
如果怕延迟,可以找找react lazy load之类的组件。

直接加一个函数

onLoad={(ev) => {
     // 图片加载完毕
     window.dispatchEvent(new Event('resize'));
     //计算图片宽高
     console.log(ev.currentTarget.width)
 }}
1. 来了来了来了
推荐问题