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

Question

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

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

怎么解决？

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

可以参考这个 https://blog.csdn.net/qq_4020...
最好设置延时 否则获取不到宽高

Answer 5

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

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

Answer 6

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

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

Answer 7

直接加一个函数

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

Answer 8

1. 来了来了来了