利用 element-ui 中 el-image 组件实现，图片正在加载时的动画

效果：成功失败

代码

<el-image class="style_10" :src="item1">
  <!-- 加载时的动画 -->
  <div slot="placeholder" class="image-slot">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <!-- 加载失败时的显示 -->
  <div slot="error" class="image-slot">
    <i class="el-icon-picture-outline"></i>
  </div>
</el-image>

样式

.style_10 {
  width: 500px;
  object-fit: cover;
}
.image-slot {
  width: 500px;
  height: 500px;
  display: flex;
  /* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */
  align-items: center;
  justify-content: center;
}
/* 小竖条 */
.item {
  height: 30px;
  width: 5px;
  background: skyblue;
  /* 加margin，使竖条之间有空隙 */
  margin: 0px 3px;
  /* 圆角 */
  border-radius: 10px;
  /* 动画：名称、时间、循环 */
  animation: loading 1s infinite;
}

/* 设置动画 */
@keyframes loading {
  0% {
    height: 0px;
  }

  50% {
    height: 30px;
  }

  100% {
    height: 0px;
  }
}
/* 为每一个竖条设置延时 */
.item:nth-child(2) {
  animation-delay: 0.1s;
}

.item:nth-child(3) {
  animation-delay: 0.2s;
}

.item:nth-child(4) {
  animation-delay: 0.3s;
}

.item:nth-child(5) {
  animation-delay: 0.4s;
}

.item:nth-child(6) {
  animation-delay: 0.5s;
}

.item:nth-child(7) {
  animation-delay: 0.6s;
}

.item:nth-child(8) {
  animation-delay: 0.7s;
}