Bootstrap-vue 延迟加载显示旧图像
Bootstrap-vue lazy loading showing old image
我正在为我的网络应用程序使用 Nuxt，并且我有一个带有图像的项目列表。
对于图像延迟加载，我使用组件 https://bootstrap-vue.js.org/docs/components/image 并且它工作正常。
我的用法示例：
<div class="item">
<b-img-lazy :src="imageUrl" />
</div>
当我过滤我的项目时出现的问题，因为视图正在重用，当我过滤时（假设它是 10，现在只有 1），项目将具有另一个项目的图像，直到它的图像将被加载。
所以，基本上，我可以看到之前具有相同位置的项目的图像，而不是看到新项目的空图像。
有没有办法重置旧图像？
v-bind:key 可能是您的朋友。绑定一个键将强制完全重新渲染组件，而不是仅仅修补组件的更改。
<div class="item">
<b-img-lazy :key="imageUrl" :src="imageUrl" />
</div>
文档在这里：https://vuejs.org/v2/guide/list.html#Maintaining-State
我正在为我的网络应用程序使用 Nuxt，并且我有一个带有图像的项目列表。 对于图像延迟加载，我使用组件 https://bootstrap-vue.js.org/docs/components/image 并且它工作正常。
我的用法示例：
<div class="item">
<b-img-lazy :src="imageUrl" />
</div>
当我过滤我的项目时出现的问题，因为视图正在重用，当我过滤时（假设它是 10，现在只有 1），项目将具有另一个项目的图像，直到它的图像将被加载。
所以，基本上，我可以看到之前具有相同位置的项目的图像，而不是看到新项目的空图像。
有没有办法重置旧图像？
v-bind:key 可能是您的朋友。绑定一个键将强制完全重新渲染组件，而不是仅仅修补组件的更改。
<div class="item">
<b-img-lazy :key="imageUrl" :src="imageUrl" />
</div>
文档在这里：https://vuejs.org/v2/guide/list.html#Maintaining-State