JS实现图片不存在时显示默认图片

Posted 2023-03-10 猎人在吃肉

当图片丢失的情况，或者图片不存在时，网页上的红叉会显得很难看，这时候我们可以选择显示默认图片来代替，

方法1

<img  src="图片地址"  onerror="javascript:this.src='http://www.test.com/static/images/default.jpg'"  /> 

方法2

<img id="image1" src="图片地址" onerror="getDefaultImage()" alt="bbb"/> 
 
<script>
function getDefaultImage()  
	var img=event.srcElement;          
	img.src="默认图片地址";          
	img.onerror=null;    

</script>

关键要做的一件事是添加img.onerror = null。该行的相关性是，如果由于任何原因新分配的图像链接断开或未获取图像，onerror则将再次触发事件。如果图像没有再次加载，又再触发另一个触发器。这就产生一个无限的循环。

分配null给事件可以防止这种情况。如果新的图片链接失效，错误事件不会调用回调函数，然后alt会显示文字。

方法3

<img id="image1" src="图片地址" alt="xxxxx"/>
 
<script>
	// 对单个图片绑定一次性事件
	$("#image1").one("error", function()
		$(this).attr("src", "默认图片地址");   
	);
	
	// 批量对图片绑定一次性事件
	$('body').find('img').one("error", function()
	    $(this).attr("src", "默认图片地址");
	)
</script>

注意，这里使用的是 jQuery one() 方法，one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。