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

加载中默认图片：
主要是onload事件监听，data中定义变量

imgSrc ：require('./default.png')；

<div class="per-pic" v-for="(item, index) in picData" :key="index">
    <img :src="imgSrc" :onload="loadImg(item.url)" />
</div>

/*
  **图片加载中
* */
 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图片加载中以及加载失败显示默认图片问题

最新文章

热门文章