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

Question

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

我怎样才能在 vuejs 中实现它？

原文由 boombamboo 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 ：傻我！它实际上是一个接口，用于向许多 HTML 元素发出的原生 onerror 事件添加监听器，类似于 <input @blur="someHandler"> 等。

原文由 kano 发布，翻译遵循 CC BY-SA 4.0 许可协议