Vue图片加载错误、图片加载失败的处理
比如后台返回的一个图片字段pic,我们通常在代码里,会做一个检验图片,通常会像下面这样写<img :src="pic?pic:'../../assets/img/load.png'" alt="">这个判断只能判断pic是否存在,只有pic=''的情况下,才回显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的图片呢?这个时候就要...
·
加载一个图片pic,会在代码里做一个检验图片是否存在,通常会像下面这样写
<img :src="pic?pic:'../assets/img/load.png'" alt="">
这个判断只能判断pic是否存在,只有pic=''"的情况下,才会显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的路径呢?这个时候就要用onerror来检测图片加载错误,加载失败了
刚开始试了两种方法,都没有成功,
失败方法一:传送门:http://blog.csdn.net/qq_32786873/article/details/53483951
失败方法二:传送门:http://www.zhihu.com/question/27426689
不墨迹直接上方法,(在data里面先定义好失败的图片路径)
注意的几个点,我第一次写的就入坑了
1. onerror前面要用冒号 :
2. 注意看logo定义的格式,符号不要写错了
<!--template-->
<img :src="pic?pic:'../../assets/placeholder.png'" :onerror="errorImage" alt="">
<!--script-->
<script>
export default {
data() {
return {
errorImage: 'this.src="' + require('../assets/error.png') + '"' ,
}
},
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)