vue img标签:onerror="defaultImg"或@error=“defImg()” 使用

一个正常的img标签如下：

<img class="img" src="/static/images/default.png" rel="" alt="" >

这种情况，如果图片路径正确会显示出来，如果路径错误就显示不出来，体验非常不好；通常我们处理的方式是给一个默认的图片，当没有图片显示时，就显示默认的图片。

于是就有了下面的代码

<img class="img" rel="" alt="" src="/static/images/default.png" :onerror="defaultImg" />

<img class="img" :src="/static/images/default.png" @error="defImg()" />

export default {
    data () {
        return {
            defaultImg: 'default.png',
        }
    }
}

 defImg(){
     let img = event.srcElement;
     img.src = this.defaultImg;
     img.onerror = null; //防止闪图
 }