javascript - Vuejs - 检查图像 url 是否有效或损坏

Question

与Angular 2 - Check if image url is valid or broken完全一样.

我如何在 vuejs 中实现它？

Answer 1

Vue.js 有一个 @error您可以 Hook 的事件。来自 vuejs issue#3261 .所以你可以这样做:

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

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

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

Edit2:我真傻!其实就是给原生 onerror 添加监听的接口(interface)许多 HTML 元素发出的事件，类似于 <input @blur="someHandler">等