Блог

При использовании vuetify происходит длительное мигание при смене v-img источника.
Можно ли продолжать показывать текущее изображение до тех пор, пока не будет загружено новое изображение?

 <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>
 

Я также попытался загрузить изображение через axios , что сократило время мигания, но оно все еще видно.

 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);
    }