前端页面图片加载失败显示默认图片

1.图片地址为链接地址时：

<img width="50px" name=" " id=" " src=" " onerror="javascript:this.src=' '"/>

2.为静态图片时：

<template>
  <img @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>

3.原生写法

 //页面图片加载失败时 默认显示统一处理
 document.addEventListener(“error”, function (e) {
 
     var elem = e.target;
     if (elem.tagName.toLowerCase() == “img”) {
 
         elem.src = “/image/General/errorDefault.png”;
     }
 }, true);
 

这种写法的好处，可以监听到动态js添加进来的元素，有些人可能会用jq的事件代理delegate或者on（error事件不支持冒泡，失败），最好先将默认图片预加载：

var imgObj = new Image();
 

 imgObj.src = ‘默认路径’;

如果默认图片也加载失败，会出现闪烁并且不断触发error方法，陷入死循环。

解决办法就是定义全局变量 num 每触发一次error num++，当num大于某一阀值的时候停止 定义error = null；关闭监听，并且显示alt的内容，做到向下兼容。

4.Jquery:

 $("img").on("error", function () {    $(this).attr("src", "../img/img.jpg"); });

不支持动态添加的元素。

而且也会陷入死循环

5.可以避免陷入死循环的

(this).attr(“src”, “default.gif”);