[JavaScript知识库]vue图片出错显示默认图片

vue图片出错显示默认图片

图片出错分为：

1. 网络异常导致图片加载不成功
2. 图片地址出错导致图片地址加载不成功

解决方案

3. 网络异常使用样式
   给图片添加伪类，图片不显示时，显示背景图片

img {
	width: 100%;
    height: 100%;
    position: relative;
    &:after{
    	content: "";
   		display: inline-block;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 1.65rem;
        height: 1.65rem;
        background: url("./assets/images/defaultImg.png") no-repeat;
        background-size: 100% ;
        background-color: #fff;
     }
}

4. 地址出错使用onerror方法

<div class="icon"><img :src="item.appImg" :onerror="errorImg(item)"></div>
errorImg(item){
     return 'this.οnerrοr=null;this.src='+'"'+ './assets/images/defaultImg.png' +'";';
}