问题:在写项目时,使用的img标签总会遇到一些奇奇怪怪的图片,不是加载慢就是加载不出来,所以我们做相应的处理,就能使得用户体验更好了
解决: 给img标签一个onerror失败事件,在图片加载失败时做处理,删除或者更换图片就好了。
上代码:
<img
:src="content.thumb "
class="link_img_box"
@error="errorImg">
// 或者
<img
:src="content.thumb "
class="link_img_box"
:οnerrοr="defaultImg">
// 图片加载失败
errorImg(e) {
const img = e.srcElement
img.src = 'https://crm-1253803335.file.myqcloud.com/img/20211215/df47506f3a039c86.png?imageView2/1/w/52/h/52'
img.onerror = null // 防止闪图
},
// 或者
defaultImg(){ //地址错误时,直接删除img标签
this.remove()
}
如果需要做加载中操作,同理,可以给一个@load事件,对图片加载中时做处理