img標簽的onerror事件應用

適用場景：img標簽中的src圖片加載失敗，原來的圖片位置會出現(xiàn)一個碎片圖標，用戶體驗會下降。
這時候就可以考慮用默認圖片進行占位；

 //當默認圖也不存在時，圖片加載死循環(huán)。
<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 // 防止閃圖
    },