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

Question

它与Angular 2完全相同- 检查图像URL是有效还是坏了.

我怎样才能在vuejs中实现这个？

Answer 1

Vue.js有一个@error你可以参与的活动.来自vuejs 问题#3261.所以你可以这样做:

<template>
   <img :src="avatarUrl" @error="imageLoadError" />
</template>

<script>
export default {
  methods: {
    imageLoadError () {
      console.log('Image failed to load');
    }
  }
};
</script>

编辑:我发现这也适用于<audio>标签(我怀疑其他元素定义src属性并加载资产)!

Answer 2

似乎@error 工作正常。我个人使用一种带有事件的方法来设置替代图像。

<img :src="imageUrl" @error="imageUrlAlt">

方法：

imageUrlAlt(event) {
    event.target.src = "alt-image.jpg"
}

来自 Vue.js问题#5404。

最佳解决方案：

<img :src="imageUrl" @error="imageUrl='alt-image.jpg'">

感谢大家的宝贵意见。