Using vuetify, how can I refresh image source without blinking?

Viewed 157

Using vuetify, there's a long blink when changing v-img source.
Is it possible to keep showing the current image until the new image is loaded?

<template>
  <v-col>
    <v-img
      :src="image"
      width="300"
    />
    <v-btn @click="refresh()">Refresh</v-btn>
  </v-col>
</template>

<script>
export default {
  data() {
    return {
      image: 'https://source.unsplash.com/random/300x300'
    }
  },
  methods: {
    refresh() {
      this.image = 'https://source.unsplash.com/random/300x300?sig=' + +new Date();
    }
  }
}
</script>

enter image description here

I also tried loading the image via axios, which shorten the blink but it's still visible.

async refresh() {
      const image = await this.$axios.$get('https://source.unsplash.com/random/300x300?sig=' + +new Date(), {responseType: 'blob'});
      const urlCreator = window.URL || window.webkitURL;
      this.image = urlCreator.createObjectURL(image);
    }
0 Answers
Related