当原图片加载失败时，如何让图片加载上我们默认给的图片

曾经终败给现在 2022-06-17 07:16 287阅读 0赞

我们可能会遇到这样的问题，当页面中的图片的加载失败时，我们想要该图片加载我们给的默认的图片，我在这里分享一下几种做法，希望对大家有所帮助。

1、在img标签中加上 οnerrοr="this.src='error.png ' ";

<img src="Images/1.png " οnerrοr="this.src='error.png ' " >

2、不想在每个img中都定义onerror事件的话，就使用jquery试试  
JavaScript code

$(window).load(function() \{  
$('img').each(function() \{  
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) \{  
this.src = './image/logo.gif';  
\}  
\});  
\});

3、但是都要考虑，重载的图片仍然错误，就会陷入死循环

下面给出一个带重试次数，并且延迟加载的实现，超过重试次数仍不能正常显示的，显示缺省图片

<html>

<head>  
<title>显示默认图片</title>  
<scripttype="text/javascript">  
  
functionshowImgDelay(imgObj,imgSrc,maxErrorNum)\{  
showSpan.innerHTML += "--" +maxErrorNum;//显示出加载图片出错的次数  
if(maxErrorNum>0)\{  
imgObj.οnerrοr=function()\{  
showImgDelay(imgObj,imgSrc,maxErrorNum-1);  
\};  
setTimeout(function()\{  
imgObj.src=imgSrc;  
\},500);  
\}else\{  
imgObj.οnerrοr=null;  
imgObj.src="images/default.jpg";  
\}  
\}  
  
</script>  
</head>  
<body>  
<img onerror="showImgDelay(this,'123456.png',2);" src="666.png" width="200" height="200"/>  
<spanid="showSpan"></span>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 img图片加载失败？

问题场景在工作中经常会使用< img >标签进行图片展示，但是经常有图片加载失败的情况发生（图片地址不存在、图片已经删除等）。场景再现图片加载失败时的用户体

忘是亡心i/ 2024年02月19日 18:09/ 0 赞/ 79 阅读

相关 img onerror 图片加载失败显示默认图

img onerror 图片加载失败显示默认图  <img src="images/logo.png" onerror="javasc

深藏阁楼爱情的钟/ 2023年01月23日 09:53/ 0 赞/ 247 阅读

相关 html如何加载图片

HTML 5 <img> 标签定义和用法 <img> 标签定义图像。 HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中，图像的

旧城等待，/ 2022年09月17日 05:27/ 0 赞/ 218 阅读

相关 js处理img标签加载图片失败，显示默认图片

1.第一种方法：如果已经引入了jquery插件，就很好办。没有的话，如果实在需要，可以附上代码： script(type='text/javascript',

Myth丶恋晨/ 2022年08月20日 13:25/ 0 赞/ 588 阅读

相关当原图片加载失败时，如何让图片加载上我们默认给的图片

我们可能会遇到这样的问题，当页面中的图片的加载失败时，我们想要该图片加载我们给的默认的图片，我在这里分享一下几种做法，希望对大家有所帮助。 1、在img标签中加上 οnerr

曾经终败给现在/ 2022年06月17日 07:16/ 0 赞/ 288 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 368 阅读

相关 vue + 图片加载 + 默认图片

需求：图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。解决：先判断返回数据是否有，再通过img 的 load事件判断是否加载完成

╰+哭是因爲堅強的太久メ/ 2022年03月10日 18:20/ 0 赞/ 493 阅读

相关 vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等

<template> <d2-container> <h3>image加载失败使用默认图片</h3> <img src=""

谁借莪１个温暖的怀抱￠/ 2021年07月26日 12:00/ 0 赞/ 2895 阅读

相关 Jquery判断页面图片是否加载失败,加载失败则显示默认图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

电玩女神/ 2021年07月24日 16:19/ 0 赞/ 500 阅读

相关 uni-app 图片加载前和加载失败显示默认图

问题我们在用 uni-app 开发前端时，经常会用到 image 图片组件，有时图片比较大、网络差或者图片资源已经不存在，就会导致 image 无法显示图片，而呈现出来...

朱雀/ 2021年03月30日 11:08/ 0 赞/ 3111 阅读