如何避免Vue3应用中占位图片的临时加载问题？

1. 操作有误的原因 #

• 你大概率是先渲染占位图，之后再替换为海报URL，或者使用v-if/v-else时，因海报是远程资源、加载速度慢于本地占位图，导致初始判断海报存在后，海报还未加载完成，占位图就已经先显示出来。
• 另一种可能是同时渲染了海报和占位图，靠CSS控制显示隐藏，但占位图加载更快，所以会短暂出现。

2. 最可靠的修复方法 #

方法一：用v-if/v-else精准控制渲染，仅显示对应图片 #

直接根据TMDB返回的poster_path是否存在，决定渲染海报还是占位图，不同时渲染两个。海报存在时直接请求远程资源，加载过程中可添加loading状态优化体验，不会出现占位图闪烁。

示例代码：

<template>
  <div class="movie-poster">
    <!-- 有海报时渲染远程海报 -->
    <img 
      v-if="movie.poster_path" 
      :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" 
      alt="电影海报"
      class="poster-image"
      @load="posterLoaded = true"
    >
    <!-- 无海报时渲染占位图 -->
    <img 
      v-else 
      src="@/assets/generic-poster-big.png" 
      alt="默认海报"
      class="poster-image"
    >
    <!-- 海报加载中显示loading -->
    <div v-if="movie.poster_path && !posterLoaded" class="loading">加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 假设Movie是你定义的电影类型接口
interface Movie {
  poster_path?: string;
  // 其他字段...
}
const movie = ref<Movie>(/* 从API获取的电影数据 */);
const posterLoaded = ref(false);
</script>

<style scoped>
.poster-image {
  width: 100%;
  height: auto;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

方法二：利用图片onload/onerror事件动态控制显示 #

先隐藏所有图片，等海报加载完成后再显示；若海报加载失败，再显示占位图，彻底避免占位图短暂出现的问题。

示例代码：

<template>
  <div class="movie-poster">
    <img 
      ref="posterRef"
      :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" 
      alt="电影海报"
      class="poster-image"
      style="display: none;"
      @load="showPoster"
      @error="showDefault"
    >
    <img 
      ref="defaultRef"
      src="@/assets/generic-poster-big.png" 
      alt="默认海报"
      class="poster-image"
      style="display: none;"
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const movie = ref<Movie>(/* 电影数据 */);
const posterRef = ref<HTMLImageElement | null>(null);
const defaultRef = ref<HTMLImageElement | null>(null);

const showPoster = () => {
  posterRef.value?.style.display = 'block';
};

const showDefault = () => {
  defaultRef.value?.style.display = 'block';
};
</script>

核心注意点 #

• 不要先渲染占位图再替换src，这必然会导致占位图短暂显示。
• 优先根据海报存在的逻辑精准渲染对应图片，远程海报加载过程中用loading状态填补空白，提升体验。
• 一定要给海报添加@error事件，避免海报加载失败时显示破碎图片图标。

内容的提问来源于stack exchange，提问作者Razvan Zamfir