加载图片时显示默认图片和默认文字

今天要实现一个功能，移动端上拉加载时，图片未加载出来时显示默认图片和默认文字…
将实现思路做一个分享

1.显示默认背景图

这个就真的超简单了，直接给图片设置一个背景色或者背景图就完事了，感觉都不用什么js，反正我这么做实现效果了。图片展示出来会自动覆盖住背景的

<div class="content-img">
  <img
    class="image_bg"
    :src="item.url" />
</div>

.image_bg {
   background: rgba(0, 0, 0, .1) url('../../../assets/images/default_img.png') no-repeat center;
}

2. 显示默认背景图加文字

还有这种就是既要显示默认背景图，背景图上面还要写个加载中…（虽然感觉几乎用不到），但还是顺便做出来吧

我的思路是，背景图或者背景色还是用上面第一种方式，就使用图片的背景色和背景图，文字使用<p>，监听图片的加载，加载成功后隐藏<p>，加载失败的时候，把<p>里面的文字改成 “加载失败”

页面结构如下，

<div class="content-img">
  <img
    class="image_bg"
    :src="item.url"
    @load="$loadSuccess"
    @error="$loadError" />
      <p class="image_bg_text">加载中...</p>
</div>

main.js

Vue.prototype.$loadSuccess= function(event) {
  if (event.target.complete == true) {
      event.target.classList.remove("image_bg");
      let tipTextNode = event.target.nextSibling;
      if(tipTextNode.classList.contains('image_bg_text')){
        tipTextNode.style.display = "none";
      }
  }
};
Vue.prototype.$loadError= function(event) {
  event.target.classList.add("image_bg");
  let tipTextNode = event.target.nextSibling;
  if(tipTextNode.classList.contains('image_bg_text')){
    tipTextNode.style.display = "none";
    tipTextNode.innerText = '加载失败'
  }
};

.content-img {
  height: 60px;
  width: 80px;
  position: relative;
}

.content-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: cover;
}

.content-img .image_bg {
  background: rgba(0, 0, 0, .1) url('../../../assets/images/default_img.png') no-repeat center;
}

.image_bg_text {
  position: absolute;
  color: #FFF;
  font-size: 12px;
  width: 100%;
  height: 100%;
  line-height: 60px;
  text-align: center;
}