Vue图片加载错误、图片加载失败的处理

大家好，又见面了，我是你们的朋友全栈君。

加载一个图片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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137303.html原文链接：https://javaforall.cn