vue.js - 如何为图像制作预加载器？

Question

我有照片

<img class="block" :src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1024px-Google_%22G%22_Logo.svg.png" />

但是如何在主图片未加载时显示其他图片？

Answer 1

    <template> <div>
       <img class="loading" v-if="pending" alt="image" /> <!-- This is a beautiful animation -->
       <img src="your-image.png" v-if="pending" alt="image" /> <!-- If you want to put another optional picture you will do so -->
       <img v-else :src="img" class="block" alt="image" /> </div>
    </template>

<script>
export default {
  data() {
    return {
      pending: false,
      img: ''
    };
  },
  created() {
      this.pending = false
      // your get request
       fetch("https://example-api.com/image")
      .then((data) => (this.img = data.img))
      .finally(() => {
       this.pending = false;
      });
  },
};
</script>

<style lang="scss">
 .loading {
  position: relative;
  user-select: none;
  cursor: wait;
  transition: all 0.2s;
  border-radius: 4px !important;
  border: none;
  background: transparent;
  overflow: hidden;
  color: transparent !important;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #e8ecf1 !important;
    cursor: wait;
    -webkit-mask-image: radial-gradient(white, black);
    transition: all 0.2s;
  }

  &:after {
    animation: loading 1.5s infinite;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );
  }

  svg {
    opacity: 0;
  }
}
</style>