Vuejs - 检查图片网址是有效还是损坏

Posted 2021-03-28

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

我怎样才能在vuejs中实现这个？

答案

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

另一答案

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

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