Image loading issue with vue

Question

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.com/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?

Since images are external and slow to load consider lazy loading them https://markus.oberlehner.net/blog/lazy-loading-responsive-images-with-vue/ — estinamir, Dec 16 '18 at 18:24

score 2 · Answer 1 · answered Dec 16 '18 at 16:44

2

A common trick to defeating the cache is to add an innocuous, changing parameter to your url, such as a timestamp:

<img :src="'https://external-site.com/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.

answered Dec 16 '18 at 16:44

Jim B.

4,512
3
25
53

That still doesn't work. The cached image still remains until the other image loads – chinloyal Dec 16 '18 at 16:51
Hmmm. maybe first point it at a known local image that would indicate 'loading', then change to the new url? – Jim B. Dec 16 '18 at 16:54

score 2 · Accepted Answer · answered Dec 16 '18 at 19:24

I solved the issue by using Progressive image rendering with vue:

First I installed a package that gave me a v-lazy-image component by npm i v-lazy-image then I imported the component

<script>
import VLazyImage from "v-lazy-image";

export default {
  components: {
    VLazyImage
  }
};
</script>

The component then allows you to specify the image and a placeholder image to use while the image loads:

<v-lazy-image
  :src="'https://external-site.com/photos/' + item.name + '.jpg'"
  src-placeholder="/images/default.jpg"
  />

You can see more details of this component here

Derzu · Answer 3 · 2019-09-19T12:45:40.293

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.

Image loading issue with vue

3 Answers3