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

如果 img标签中的src图片logo.png加载失败，原来的图片位置会被error.png 替换

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

如果logo.png不存在会触发 onerror事件，指定图片error.png 去替补， 如果替补图片error.png 还不存在，还会继续触发onerror事件， 需要使用img.onerror=null 取消事件处理

Vue处理方式

  



/**
 * 有错误处理的图片
 */
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;
    },
  },
};

参考 img标签的onerror事件