使用Vuetify时如何实现v-img切换图片源无闪烁效果？

问题原因 #

直接修改v-img绑定的src属性时，组件会先清除当前显示的旧图片，等待新图片资源加载、解码完成后才渲染新内容，中间的空白期就是你看到的闪烁现象。

解决方案 #

核心逻辑是先预加载新图片资源，等资源完全加载完成后，再替换v-img绑定的src值，全程旧图片会保持显示，直到新图就绪再无缝切换。

完整实现代码 #

<template>
  <v-col>
    <v-img
      :src="currentImage"
      width="300"
    />
    <v-btn @click="refresh">刷新</v-btn>
  </v-col>
</template>

<script>
export default {
  data() {
    return {
      currentImage: 'https://source.unsplash.com/random/300x300'
    }
  },
  methods: {
    refresh() {
      const newImageUrl = 'https://source.unsplash.com/random/300x300?sig=' + +new Date()
      // 创建临时Image对象预加载新图
      const tempImg = new Image()
      tempImg.src = newImageUrl
      // 新图加载完成后再替换当前显示的地址
      tempImg.onload = () => {
        this.currentImage = newImageUrl
      }
    }
  }
}
</script>

优化说明 #

如果你的图片体积较大，还可以搭配v-img的placeholder插槽增加加载状态提示，提升用户体验：

<v-img
  :src="currentImage"
  width="300"
>
  <template v-slot:placeholder>
    <v-row align="center" justify="center" fill-height>
      <v-progress-circular indeterminate color="grey" />
    </v-row>
  </template>
</v-img>

该方案比axios拉取blob的方式更轻量，也不会产生额外的内存占用问题，浏览器会自动复用预加载好的缓存资源，切换时不会出现任何空白闪烁。

内容的提问来源于stack exchange，提问作者Ronen Teva