在 src 更改时用占位符替换图像

Question

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

<img :src="image.url">

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

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

我可以使用触发更改并且有效的代码添加 DOM 操作，但我宁愿使用 vue 绑定正确地做到这一点。

Answer 1

这应该会让你走上正轨：

1. 在您的data() 函数中有一个imageLoading 属性。
2. 如下设置你的:src:<img :src="imageLoading ? ./myPlaceholder.png : image.url" />
3. $watch 你的 image.url 来设置加载图片，只要它改变：

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

4. 在您的 img 标签中添加一个@load 处理程序，以便在图像加载时将 imageLoading 设置为 false：<img :src="imageLoading ? ./myPlaceholder.png : image.url" @load="imageLoading = false" />

注意@load 处理程序 - 无耻地从this question 窃取，它确实链接到一个示例。