Vuejs - 检查图像网址是否有效或损坏答案

【问题标题】：Vuejs - Check if image url is valid or brokenVuejs - 检查图像网址是否有效或损坏
【发布时间】：2017-09-28 14:49:13
【问题描述】：

和Angular 2 - Check if image url is valid or broken一模一样。

如何在 vuejs 中实现？

【问题讨论】：

同理：onerror事件。
Detect when an image fails to load in Javascript的可能重复

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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 属性并加载资产的元素）！

Edit2：真傻！它实际上是为许多 HTML 元素发出的原生 onerror 事件添加监听器的接口，类似于 <input @blur="someHandler"> 等。

【讨论】：

我在 Vue 的文档中找不到任何关于 @error 的详细信息
@Asqan onerror 是<img> 元素可以发出的有效HTML 事件，因此@error（或v-on:error）只是Vue 处理onerror 事件的语法糖。这与为有效的 HTML 事件调用 <button @click="clickHandler">、<input @blur="blurHandler"> 或任何其他事件侦听器相同。 developer.mozilla.org/en-US/docs/Web/HTML/Element/…

【解决方案2】：

我使用了一个计算属性，它返回一个带有占位符 URL 的字符串，而不是像这样的 @error 处理程序。这样，如果 source 为 null 或未定义，则将加载占位符。

<img :src="source || computedPropertyString" />

【讨论】：

这不适用于 source 已定义但该网址上不存在图像 (404) 或无法访问 (403) 的情况。

【解决方案3】：

看来@error 工作正常。我个人使用事件的方法来设置替代图像。

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

方法：

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

来自 Vue.js issue#5404。

最佳解决方案：

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

感谢大家提供宝贵的 cmets。

【讨论】：

我很喜欢这个答案。它也可以完全内联而不会造成太多混乱。 <img :src="viewModel.logo" @error="$event.target.src = '[source image]'" alt="Company logo" />
更多的 Vue 方法是在 imageUrlAlt 处理程序中为 image 设置一个新值：this.image = 'alt-image.jpg'，让 Vue 更新 DOM 而不是我们手动触摸它。