Vuejs - 检查图片URL是否有效或损坏

Question

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

我该如何在vuejs中实现这个功能？

- boombamboo

---

同样的方式：onerror事件。 - dfsq

可能是在Javascript中检测图像加载失败的重复问题。 - user4639281

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

编辑2：我太傻了！它实际上是为原生onerror事件添加监听器的接口，类似于<input @blur="someHandler">等。

- kano

---

我在Vue的文档中找不到有关@error的详细信息。 - Asqan

@Asqan onerror 是一个有效的 HTML 事件，<img> 元素可以发出该事件，因此 @error（或 v-on:error）只是 Vue 的语法糖来处理该 onerror 事件。这与调用 <button @click="clickHandler">、<input @blur="blurHandler"> 或任何其他有效 HTML 事件的事件侦听器相同。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Image_loading_errors - kano

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'">

感谢大家的宝贵评论。

- Jakub A Suplicki

---

我非常喜欢这个答案。它可以完全内联，而且不会有太多混乱。<img :src="viewModel.logo" @error="$event.target.src = '[source image]'" alt="公司标志"/> - Matthew Spencer

更符合Vue的做法是在imageUrlAlt处理程序中设置image的新值：this.image = 'alt-image.jpg'，让Vue更新DOM而不是我们手动操作它。 - kano

Answer 3

我使用一个计算属性，返回一个包含占位符URL的字符串，而不是像@error处理程序一样。这样，如果源为null或undefined，则会加载占位符。

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

- alansaldivar

---

如果source已定义但是在该URL上图像不存在（404）或无法访问（403），则此方法无效。 - Mandeep Singh