利用onerror 事件处理img标签中的src图片加载失败

<img src="logo.png" onerror="handleImageError()" />
<script type="text/javascript">
  function handleImageError() {
    console.log(event);
    var img = event.target;
    img.src = "error.png";
    // 控制它不循环;
    img.onerror = null;
  }
</script>

<template>
  <img v-bind="$attrs"
    v-on="$listeners"
    @error="handleError" />
</template>
<script>
/**
 * 有错误处理的图片
 */
export default {
  name: "MoImage",
  data() {
    return {
      // 默认值
      defaultImage: require("@/assets/image/image-default.png"),
    };
  },
  methods: {
    // 错误值处理
    handleError(event) {
      event.target.src = this.defaultImage;
      // 控制不要一直跳动
      event.target.onerror = null;
    },
  },
};
</script>