[JavaScript知识库]vue中img标签onerror事件

vue中img标签onerror事件

使用:onerror去绑定事件

该方法能正确处理onerror事件，并防止闪图

<img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" />

//图片损毁时触发
    imgOnError(e){
        let img = e.srcElement;
        img.src = this.errorImg;
        img.onerror = null; //防止闪图
    },

使用@error会导致回闪

使用@error会导致回闪，图片回闪问题

<img type="image/x-icon" :src="item.icon?item.icon:''" @error="imgOnError($event)" />

//图片损毁时触发
    imgOnError(e){
    	console.log("闪图")
        let img = e.srcElement;
        img.src = this.errorImg;  //data中的图片
        img.onerror = null; //防止闪图，写了但是图片还是会回闪
    },

这种图片不回闪，但是还是回疯狂回调onerror事件，并且会发现元素的onerror事件那里还注册这函数，并没有清除掉。

<img type="image/x-icon" :src="item.icon?item.icon:''" @error="imgOnError()" />

//图片损毁时触发
    imgOnError(){
    	console.log("触发事件")
        let img = event.srcElement;  //已经弃用
        img.src = this.errorImg; //data中的图片
        img.onerror = null; //防止闪图，写了但是还是会疯狂回调onerror的注册事件
    },

关于没图片时onerror事件不触发问题

vue在item.icon为null或者undefined时，并不会对这个src进行赋值，没有src属性貌似是无法触发onerror事件的。

<img type="image/x-icon" :src="item.icon" :onerror="imgOnError" />
<!--vue处理出来结果，没src无法触发onerror事件-->
<img type="image/x-icon" />



<img type="image/x-icon" :src="item.icon?item.icon:''" :onerror="imgOnError" />
<!--vue处理出来结果，有src并且解析不出图片，触发onerror事件-->
<img type="image/x-icon" :src=""/>