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

大家好，又见面了，我是你们的朋友全栈君。

方法有多种：

1.首先说我用的，看代码

//页面图片加载失败时 默认显示统一处理 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的内容，做到向下兼容。

2.普通的方法：

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

不支持动态添加的元素。

而且也会陷入死循环

3.另一种是可以避免陷入死循环的

(“img”).one(“error”, function(e){ (this).attr(“src”, “default.gif”);});

4.还有一种直接在html标签中添加：

<img src=“/image.gif” onerror=‘this.src=”default.gif” />

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137205.html原文链接：https://javaforall.cn