Bootstrap-vue 延迟加载显示旧图像

Question

我将 Nuxt 用于我的网络应用程序，并且我有一个带有图像的项目列表。 对于图像延迟加载，我正在使用组件https://bootstrap-vue.js.org/docs/components/image，它工作正常。

我的用法示例：

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

当我过滤我的项目时出现的问题，因为视图正在重用，当我过滤时（假设它是 10，现在只有 1 个），项目将具有另一个项目的图像，直到它的图像将被加载.

所以，基本上，我可以看到以前具有相同位置的项目的图像，而不是看到新项目的空白图像。

有没有办法重置旧图像？

Answer 1

v-bind:key 可能是你的朋友。绑定一个键将强制重新渲染组件，而不是仅仅修补组件的变化。

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

这里的文档：https://vuejs.org/v2/guide/list.html#Maintaining-State