img标签的onerror事件应用

img标签的onerror事件应用

适用场景：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。
这时候就可以考虑用默认图片进行占位；

 //当默认图也不存在时，图片加载死循环。
<img class=avator' :src="data.picture" :onerror="defaultImg">

data(){
   return {
       defaultImg: 'this.src="' + require('../../assets/images/moren.png') + '"'
   }
}

//不建议
<image :src="item.specMainPicture | filterImgUrl" @error="imageError(index)"></image>

imageError: function(index) {
    this.gList[index].Picture = this.ImgUrl+"/static/category/ blockimg.png";
},


//建议
< img src=“123” @error=“defImg()” />

defaultErrorImg: require("./img/defPic.png")
import defaultErrorImg from './img/defPic.png'

 defImg () {
      let img = event.srcElement // 当前元素
      img.src = this.defaultErrorImg
      img.onerror = null // 防止闪图
    },