在vue中防止瞬间“无图像可用”的方法

<template>
  <div>
    <img v-if="isImageLoaded" :src="imageUrl" alt="Image">
    <div v-else class="placeholder">图片加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '图片地址',
      isImageLoaded: false
    };
  },
  mounted() {
    const image = new Image();
    image.src = this.imageUrl;
    image.onload = () => {
      this.isImageLoaded = true;
    };
    image.onerror = () => {
      this.isImageLoaded = true; // 加载失败也算加载完成，避免无限循环加载
    };
  }
};
</script>

<template>
  <div class="image-container">
    <div class="placeholder"></div>
    <img :src="imageUrl" alt="Image" class="image">
  </div>
</template>

<style>
.image-container {
  position: relative;
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('占位符图片地址') center center no-repeat; /* 设置默认背景图 */
  background-size: cover;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<template>
  <div>
    <img v-lazy="imageUrl" alt="Image">
  </div>
</template>

<script>
import VueLazyload from 'vue-lazyload';

export default {
  data() {
    return {
      imageUrl: '图片地址'
    };
  },
  mounted() {
    Vue.use(VueLazyload, {
      loading: '加载中的占位图地址',
      error: '加载失败的占位图地址'
    });
  }
};
</script>