Bootstrap-vue lazy loading showing old image

Question

I'm using Nuxt for my web app and I have a list of items with images. For image lazy loading I'm using component https://bootstrap-vue.js.org/docs/components/image and it is working fine.

Example of my usage:

<div class="item">
   <b-img-lazy :src="imageUrl" />
</div>

The issue appearing when I'm doing filtering of my items, because views are reusing and when I filter, (let's say it was 10 and now only 1), item will have image of another item until it's image will be loaded.

So, basically, instead of seeing empty image for new item I can see image of item which had same position previously.

Is there way to reset old image?

Answer 1

v-bind:key might be your friend here. Binding a key will force a full re-render of the component instead of just patching what changed about the component.

<div class="item">
   <b-img-lazy :key="imageUrl" :src="imageUrl" />
</div>

Docs here: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State