它与Angular 2 - Check if image url is valid or broken完全相同。
我如何在vuejs中实现这个?
答案 0 :(得分:21)
Vue.js有一个可以挂钩的@error
事件。来自vuejs issue#3261。所以你可以这样做:
<template>
<img :src="avatarUrl" @error="imageLoadError" />
</template>
<script>
export default {
methods: {
imageLoadError () {
console.log('Image failed to load');
}
}
};
</script>
修改:我发现这也适用于<audio>
代码(我怀疑其他元素定义src
属性并加载资产)!
答案 1 :(得分:1)
我使用计算所得的属性返回带有占位符URL的字符串,而不是像这样的@error处理程序。这样,如果source为null或未定义,则将加载占位符。
<img :src="source || computedPropertyString" />
答案 2 :(得分:0)
@error似乎工作正常。我个人使用带有事件的方法来设置备用图片。
<img :src="image" @error="imageUrlAlt">
方法:
imageUrlAlt(event) {
event.target.src = "alt-image.jpg"
}
来自vuejs issue#5404。