Vuejs - 检查图像网址是不是有效或损坏

Posted 2023-02-23

【中文标题】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的可能重复

【参考方案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 而不是我们手动触摸它。