web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。
对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。
使用require将图片进入,写法如下:
data() {
return {
errpic: 'this.src="' + require('../../../static/errpic.png') + '"'
};
}
然后在img的onerror方法中调用:
<img class="img" :src="list.pic" :onerror="errpic">
注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。