img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性

 

1、error事件（img标签加载失败的方法）

 imgErro=(event)=>{
        var e=window.event||event; //消除浏览器差异 
        const defaultImg="https://m.media-amazon.com/images/M/MV5BMTQ2MTI2OTEwNF5BMl5BanBnXkFtZTcwODUwMzc3Ng@@._V1_UX182_CR0,0,182,268_AL_.jpg"
        const $this=event.target;
        $this.setAttribute("src", defaultImg)
    }

 

<img src={obj.images} onError={(event)=>this.imgErro(event)} />

 

2、onload事件（img标签加载完成的方法）

 

 

 <img src={objs.src}  onLoad={ ()=>this.imgComplete(event)}/>

3、readystatechange事件

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

4、complete属性

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

 

原文：https://blog.csdn.net/yiyueqinghui/article/details/106228834

event

 

 

react 中使用 onError

 onError={(e: any) => {
                        e.target.onerror = null;
                        e.target.src = "http://www.webnotes.top/link/wp-content/uploads/logo_small.png"
                        console.log("onError");


                      }}