Vuejs - 检查图片网址是有效还是损坏

时间:2017-05-01 05:48:05

标签: javascript vue.js vuejs2 vue-component

它与Angular 2 - Check if image url is valid or broken完全相同。

我如何在vuejs中实现这个?

3 个答案:

答案 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