This issue might not be specific to vue but here goes...
I'm searching for some items and retrieving them from a database, each item has a unique name which I use to load their image from an external site, for example:
<img :src="'/' + item.name + '.jpg'" />
Whenever I search for the first item it returns the item with it's image and details. But whenever I search for a second item, it returns the right details but uses the cached image of the last item until it's own image has loaded.
I decided I would use some events on the image to show a loader before they start loading but I only found that there were three events specific to images: onabort
, onerror
, onload
.
But I need an event to show a loader at the start of downloading the image. If not, is there another way I can resolve this issue?
This issue might not be specific to vue but here goes...
I'm searching for some items and retrieving them from a database, each item has a unique name which I use to load their image from an external site, for example:
<img :src="'https://external-site./photos/' + item.name + '.jpg'" />
Whenever I search for the first item it returns the item with it's image and details. But whenever I search for a second item, it returns the right details but uses the cached image of the last item until it's own image has loaded.
I decided I would use some events on the image to show a loader before they start loading but I only found that there were three events specific to images: onabort
, onerror
, onload
.
But I need an event to show a loader at the start of downloading the image. If not, is there another way I can resolve this issue?
Share Improve this question edited Dec 16, 2018 at 16:27 user10730110 asked Dec 16, 2018 at 16:20 chinloyalchinloyal 1,1511 gold badge18 silver badges42 bronze badges 1- Since images are external and slow to load consider lazy loading them markus.oberlehner/blog/… – estinamir Commented Dec 16, 2018 at 18:24
3 Answers
Reset to default 3I solved the issue by using Progressive image rendering with vue:
First I installed a package that gave me a v-lazy-image
ponent by npm i v-lazy-image
then I imported the ponent
<script>
import VLazyImage from "v-lazy-image";
export default {
ponents: {
VLazyImage
}
};
</script>
The ponent then allows you to specify the image and a placeholder image to use while the image loads:
<v-lazy-image
:src="'https://external-site./photos/' + item.name + '.jpg'"
src-placeholder="/images/default.jpg"
/>
You can see more details of this ponent here
A mon trick to defeating the cache is to add an innocuous, changing parameter to your url, such as a timestamp:
<img :src="'https://external-site./photos/' + item.name + '.jpg?x=' + Date.now()" />
The parameter shouldn't interfere with accessing the image, but the browser won't assume the url is the same.
I had exactly the same issue. And none of the previous answers solved my problem.
At the method that change your items details and images link (ex.: changeDetails()), make a backup of your real image path (impath) at (impath_b) and set your image path to null. Vue.js will draw a transparent image, and after 100ms the real image path (impath) is restored.
changeDetails() {
// for ...
item.impath_b = item.impath; // it's not necessary declare impath_b before.
item.impath = null;
// ...
// just before the method ends:
setTimeout(function () {
vm.revertImages();
}, 100);
},
revertImages() {
// for ...
item.impath = item.impath_b;
item.impath_b = null;
}
At the html code show the image just when it is not null:
<img v-if="item.file!=null" :src="item.file"/>
<img v-else :src="transpGif"/>
Define transpGif at your variables area:
transpGif: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
more details about this transpGif here .
The idea is to clean and redraw the images with an empty image, and then the new image will be drawn when it be loaded.