vue中img图片加载中以及加载失败显示默认图片问题


加载中默认图片:
主要是onload事件监听,data中定义变量
imgSrc :require('./default.png');



/*
**图片加载中
* */
loadImg($img){
return 'this.οnlοad=null;this.src='+'"'+$img+'";';
},


加载失败目前网上很多都是用onerror事件监听,然后给this.src赋值,压根不管用啊,试了半天不管用。
用css倒是能轻松解决,具体代码如下:
img{
width: 145px;

height: 145px;

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

};

觉得好用的,请点赞,蟹蟹。

你可能感兴趣的:(vue中img图片加载中以及加载失败显示默认图片问题)