我有一个带有绑定(bind) src 值的图像
<img :src="image.url">
当 image.url
更新时,旧图像会保留在原位,直到加载新图像。这看起来有点奇怪,因为新图像在更改时滞后于文本详细信息。
当 src
属性随 vue.js 发生变化时,如何用加载指示器替换图像?
我可以使用触发更改并且有效的代码添加 DOM 操作,但我宁愿使用 vue 绑定(bind)正确地完成它。
最佳答案
这应该让您走上正确的轨道:
- 有一个
imageLoading
data()
中的属性功能。 - 按如下方式设置您的 :src:
<img :src="imageLoading ? ./myPlaceholder.png : image.url" />
- $watch your image.url 以在它发生变化时设置加载图像:
watch: {
'image.url': function() {
this.imageLoading = true;
}
- 将 @load 处理程序添加到您的 img 标记以在图像加载时将 imageLoading 设置为 false:
<img :src="imageLoading ? ./myPlaceholder.png : image.url" @load="imageLoading = false" />
关于 @load 处理程序的注意事项 - 从 this question 无耻地窃取了,它确实链接到示例。
关于vue.js - 在 src 更改时用占位符替换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59581626/