vue.js - 在 src 更改时用占位符替换图像

Question

我有一个带有绑定(bind) src 值的图像

<img :src="image.url">

当 image.url 更新时，旧图像会保留在原位，直到加载新图像。这看起来有点奇怪，因为新图像在更改时滞后于文本详细信息。

当 src 属性随 vue.js 发生变化时，如何用加载指示器替换图像？

我可以使用触发更改并且有效的代码添加 DOM 操作，但我宁愿使用 vue 绑定(bind)正确地完成它。

Answer 1

这应该让您走上正确的轨道:

1. 有一个imageLoading data() 中的属性功能。
2. 按如下方式设置您的 :src:<img :src="imageLoading ? ./myPlaceholder.png : image.url" />
3. $watch your image.url 以在它发生变化时设置加载图像:

watch: {
  'image.url': function() {
    this.imageLoading = true;
  }

1. 将 @load 处理程序添加到您的 img 标记以在图像加载时将 imageLoading 设置为 false:<img :src="imageLoading ? ./myPlaceholder.png : image.url" @load="imageLoading = false" />

关于 @load 处理程序的注意事项 - 从 this question 无耻地窃取了，它确实链接到示例。