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