img加载图片错误的时候，onerror

最新推荐文章于 2024-06-01 15:00:21 发布
最新推荐文章于 2024-06-01 15:00:21 发布
阅读量272 收藏
点赞数
原文链接：https://my.oschina.net/u/2441574/blog/495986
版权 


img加载图片错误的时候，如何给个默认图？ Img加载错误的时候不要那个“红叉”，给一个默认的透明的小图片，如何实现？
利用 Img的onerror事件。例如：<img src="图片地址" onerror="替换红叉图片地址" />  
onerror可以是一个地址，也可以是一个图片的url：此时如下所示：

<img id="img_logo" onerror="this.src='<%=baseURL %>/portal/itsm/style/img/logo.png'" 
src="<%=baseURL %><%=sysConfigVo.getLogin_logo()+"" %>" style="border: 1px solid #EEddEE;" />



转载于:https://my.oschina.net/u/2441574/blog/495986

choutanzu3300
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片加载失败显示默认图片占位符方法
06-11
onerror="onerror=null;src='http://www.lanrenzhijia.com/images/default.gif'" 将上述代码复制到你的图片标签中即可 然后故意将你的图片路径(src)指向一个错误地址，这个时候就会显示我们默认的图片
js针对图片加载失败的处理方法分析
01-19
在项目中不可避免会用到图片，尤其是列表，有时候图片会加载失败；这样就会显示一个很难看的坏图片缩略图；下面介绍两种方法，解决这个问题： 1、如果在你的项目中有引入jQuery插件，你可以使用error([[data],fn])这...
img onerror 图片加载失败显示默认图
艾小逗
07-14 698
img onerror 图片加载失败显示默认图 <!--第一种--> <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> <!--第二种--> <script> function imgErrorFun(){ var img=event.srcElement; img.src="/image/teacher.png"; img.oner
利用image对象的onerror事件来判断，出错则更换image对象的src为默认图片的URL
04-27 493
<img src="图片的url地址"alt="图片XX"onerror="this.src='默认图片的url地址';this.onerror=null"/> 转载于:https://www.cnblogs.com/zjmblogs/p/6775345.html
图片加载出错的处理方式
最新发布
fehub
06-01 496
通常情况下，HTML 中的 img 标签加载出错后会默认显示一张裂开的图片，如果设置了 alt 属性，还会在默认图片后面显示 alt 属性的内容。
img标签中的onerror事件
weixin_30918415的博客
07-15 401
img标签中有一个onerror事件。是当我引用的src属性获取不到图片或者网络错误导致无法正常显示我src属性的图片时，显示的提示错误图片或者是可以代替的万能图片。 用法： <img src="images/rightimg.png" onerror="javascript:this.src='images/errorimg.png';"> 当我onerror事件中...
img标签设置默认图片
qq_33539213的博客
11-15 4600
场景： 当获取图片路径或读取不到图片时，显示一张默认图片代替默认当图片碎片。 解决方法： 利用img标签的onerror事件。 当logo不存在时，将触发 onerror事件，而 onerror 中又为该 img 指定了defaultIcon图片。也就是说图片images/logo.png存在则显示logo，不存在将显示defaultIcon。 问题：如果defaultIcon 也不存在，则会...
图片加载错误的处理 img.onerror
weixin_34302798的博客
10-11 322
在显示用户头像时，我们常常采用先加载后显示的策略，即在加载过程中显示loading.gif，待头像加载完成后再显示出来。这样做很好的提升了用户体验。但与此同时，偶尔也会出现一些问题，比如图片加载错误（网络问题或者服务器上根本无该用户头像），这个时候如果换掉loading.gif就会显示出一张有裂痕的图标（表示图片未加载成功），而如果不换掉loading.gif则会一直显示lo...
JavaScript判断图片是否能够加载,失败则替换默认图片
10-28
有时候，由于网络问题、图片路径错误或图片资源不存在等原因，图片可能无法正常加载。这时，为了提供良好的用户体验，我们可以编写代码来判断图片是否能成功加载，并在加载失败时用默认图片进行替换。这种功能可以...
图片不存在的时候，显示一个默认图片特效代码
03-20
同时，可以使用`onerror`事件监听图片加载错误，一旦发生错误，就将默认图片的URL赋值给`src`属性，实现图片替换。 ```html <img src="target.jpg" onerror="this.src='default.jpg'" alt="图片描述"> ``` 2. CSS ...
Android实现WebView图片缓存，替换加载前默认图片的样式
03-11
<img src="your_image_url" onerror="this.src='default_image.png'" alt="Your Image"> ``` 三、实现图片点击事件 1. JavaScript交互：使用JavaScript来监听图片点击事件，然后通过`addJavascriptInterface`将...
在img标签上尽量不要使用onerror事件
weixin_30885111的博客
11-09 1025
在img标签上尽量不要使用onerror事件 因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的，但是如果刚好onerror去获取的图片也不在，那么就会一直触发onerror事件，这个标签一直在请求一个不存在的图片。也就是会一直循环请求。 如果必须使用的话,就使用js的Image对象获取这个图片的信息,判断一些属性...
img标签的onerror事件注意事项
只此浮生是梦中
10-30 868
1，如果用 $(‘img’).error(function(){ //todo… ) 方式绑定事件会有问题，放在顶部图片还没有加载，绑定不上，放在read函数中图片可能已经加载报错了事件还没绑定。 另：通过body 不能给图片绑定error事件 ...
IMG 标签的 onload 和 onerror 事件
热门推荐
qross的博客
06-01 1万+
IMG 标签一般用来加载图片，在某些情况下，还会用来做些特别的事，如记录页面访问量，老吴在很多年前见过这种玩法。除了 document 和 window 对象之外，IMG 标签是少有的几个支持 和事件的标签之一，其他还有 SCRIPT、LINK、FRAME、IFRAME 标签等，即只要有外部文件引用的标签。还有一个事件，这里不讨论。
＜img src=“图片引用失败“ onerror=“自动替换默认图片“＞ - 代码篇
草巾冒小子的博客
05-24 787
私人：码云Gitee账号【帐密信息】
img onerror 图片地址错误替换
dengzhajin4337的博客
11-27 251
<img src="http://s1.hao123img.com/res/images/search_logo/web.png" /> <img src="错误地址" onerror="javascript:this.src='http://s1.hao123img.com/res/images/search_logo/web.png';" /> ...
img图片加载失败时的处理
ouyangye831的博客
01-22 4390
当想对图片加载失败时进行特殊处理，可以使用onerror事件，里面为需要执行的代码。 如果由于其他原因导致onerror事件里加载图片时又报错，此时有可能会导致栈溢出而弹框报错，我们只需在inerror里加上一句话即可。<img src="XXXX" alt="XXXXX" onerror="this.onerror=null;this.src='XXXXX'"/>
img标签在找不到图片时显示叉叉不好看，改为显示默认图片的方法
08-01 3051
img标签有两个属性onload onerror 我们这里用onerror 当加载失败的时候 就会跳到onerror这个方法里面 我们就定义 onerror="newsImgLoadError(this)" &lt;script&gt; function newsImgLoadError(id){ $(id).attr('src','/ued/getUploadI...
IMG 显示出错时不显示红叉
pangfeng134300的专栏
03-01 660
' onerror="this.style.display='none'" />
vue img标签onerror
09-01
Vue中的img标签onerror事件是指在图片加载失败时触发的事件。当浏览器无法加载指定的图片时，可以通过使用onerror事件来处理加载失败的情况。在Vue中，可以通过在img标签上绑定onerror事件来处理加载失败的情况。 例如，我们可以在Vue模板中的img标签上绑定onerror事件，然后在组件的methods中定义一个方法来处理加载失败的情况。代码示例如下： <template> <div> <img src="path_to_image" @error="handleError" /> </div> </template> <script> export default { methods: { handleError() { // 加载失败后的处理逻辑 } } } </script> 在上述示例中，当图片加载失败时，会触发handleError方法。在handleError方法中，可以编写适当的处理逻辑，比如显示一个替代的错误图片、显示错误信息等。 另外，也可以在handleError方法中调用Vue的相关方法，比如$emit方法来触发一个自定义事件，以便在其他组件中处理加载失败的情况。 总之，Vue的img标签可以使用onerror事件来处理图片加载失败的情况，通过定义一个相应的方法来处理加载失败的逻辑，从而提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值