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

Question

我正在将Nuxt用于我的Web应用程序，并且有一个带有图像的项目列表。 对于图像延迟加载，我使用的是组件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