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 // 防止闪图
},