html设置图片加载时、加载错误时显示的默认图

最新推荐文章于 2023-09-10 22:21:43 发布
最新推荐文章于 2023-09-10 22:21:43 发布
阅读量1.3w 收藏 2
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_linjw/article/details/51591275
版权

在js中有onload、onerror两个事件，可在图片中加入，修改对于的src地址，

这样可改善网络差或者图片丢失时的用户体验

如下

<img  src="img/3.jpg" οnlοad="this.src='default.jpg" οnerrοr="this.src='error.jpg"/>


Mr_linjw
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
图片加载失败显示默认图片占位符方法
06-11
效果描述： 我们都知道，当网页中加载的图片因为某种原因而加载失败的时候 浏览器会用图片的alt值代替当前图片位置 ... 然后故意将你的图片路径(src)指向一个错误地址，这个时候就会显示我们默认的图片
HTML设置浏览器默认favicon.ico图标
weixin_43693072的博客
05-04 1770
有些业务场景需要不展示或者动态展示浏览器标签页图标，不展示时则使用浏览器默认的图标。（特别是之前设置过浏览器标签页图标，直接删除link标签是没用的）
html img标签显示一个默认图片
weixin_30839881的博客
10-14 843
1.[代码]img标签src对应的图片不存在，显示一个默认的图片 <img src="abc.JPG" onerror="this.src='default.JPG'" /> 2.[代码][CSS]引用“何世友@PoQoP”童鞋的方案 <script type="text/javascript"> t = d...
img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片
又菜又爱玩
11-21 5355
img加载前，加载成功，加载失败时分别显示不同的图片
html 如何设置选择图片,html中如何设置默认图片？
weixin_35182280的博客
06-04 1509
前言大家可能都知道img标签是怎么设置默认图片的，但是你知道background-img是如何设置默认图片的嘛？img这里是应用了img标签的``事件，当加载失败就用默认图片地址。但是这里可能出现如果默认图片地址也加载不出来，或者失败，在IE内核的浏览器下就会反复加载，出现死循环，最后造成堆栈溢出错误。因此， 需要用下面两种方法解决：更改 代码为其它处理方式或者确保 中的默认图片足够小，并且存...
img标签设置默认图片
小星落
12-27 5240
有时需要给图片设置默认图，比如用户头像，默认商品图等。img的alt属性只是给图片设置未加载时的文字提示信息。这时，通常会用到onerror属性，一下为常用的两种方法： 1、让图片元素隐藏 <img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/> 2、设置默认图 <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/> 第二种方式
Android 替换WebView加载失败时的页面
12-13
做webview加载网页时，遇到一个问题，自带的webview错误页面不美观，于是自定义一个view提示用户，网上很多方法，也不稳定实现替换，结合网上的一些例子，加以优化和拓展，特此写一个完整版本的Demo供大家拿来直接...
手机端快滑到底部时，自动加载ajax请求下一页
08-28
AJAX请求数据，绑定滚轴，滚到底部时自动加载下一页 适用于微信、手机网页端 /** * 调用方法 * HTML代码：<div id="data_box"></div> * js代码如下 */ ... error: null //错误时显示的方法 });
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
01-19
背景 笔者之前一直使用 bootstrap table ，因为当前...有一个页面，左侧是一个 tree，右侧是一个 table，默认 table 加载全数据，当点击 tree 节点时，table 进行筛选，很简单的需求吧！   这里我们不谈 tree 的使用，
用JQuery 实现AJAX加载XML并解析的脚本
12-10
如果本身就是xml文件，请跳过这一步 动态生成的XML一定要将其设置为text/xml，否则默认就是text/html也就是普通的文本了。 常见语言的Content-Type设置 代码如下: header(“Content-Type:text/xml”); //...
html中img 与backgroundImage 如何设置默认图片？
最新发布
sunxucongming的博客
09-10 625
大家可能都知道。
html怎么设置默认状态,网页中如何设置默认图片？方式介绍
weixin_34410564的博客
05-30 632
网页中如何设置默认图片？下面本篇文章就来给大家介绍一下在网页中设置默认图片，防止当图片资源失败时出现的问题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样这里的alt属性是为了当图片加载失败时告诉用户图片信息的能不能美化一下呢？下面给出几种方式js 方式相信大家碰到这种问题是，搜索的结果一般...
html中加载图片失败,图片加载失败如何用默认图片代替
weixin_39938331的博客
05-31 2236
背景：图片资源加载不出来时用默认图片替换解决方法：一，用js方法onerror： 1，直接在html标签中使用复制代码 2，原生js方法：document.getElementById('#img').onerror = function(){this.src = "images/errorLogo.png";}复制代码 3，jquery封装后的error方法：$('img').error(...
HTML中图片不存在，显示默认图片
热门推荐
远方
09-13 1万+
一个图片链接&lt;img src="" /&gt; 想用js 判断url是否有效如果404 就加载默认的图片路径 &lt;img src="xxx" onerror="this.src=默认图地址"/&gt; 图片标签img的 onerror事件 &lt;img src="pic.gif" onerror="javascript:this.src='默认图地址';&quo
html图片加载失败时显示默认图片
littlebearGreat——宁静致远
11-17 9904
网上大神的方法，这整理记录。 直接上代码： 默认图片 div{ width: 200px; height: 200px; border: 1px solid #000; } img{ width: 100%; height: 100%; } 如果1.jpg请求失败，会显示2.jpg。如果2.jpg依然显示
html img标签 图片路径错误时显示默认图片方法
weixing_fine的博客
11-20 1687
方法一： 方法二：（新闻网这种做法）
v-html中图片路径错误显示默认图
caoyan0829的博客
08-29 3062
    这是后台返回的富文本，其中包含了&lt; img/&gt;标签，如果img标签的src路径不对，就不让他显示出来 上代码：   &lt;div class="info-content info-page" v-html="infoData.content"&gt;&lt;/div&gt;   let imgs = document.querySelectorAll('...
css实现图片未加载完成时占位显示
05-24
可以通过设置图片的占位符来实现图片未加载完成时的占位显示。具体做法如下： 1. 首先，为图片设置一个默认的占位符，例如使用一个背景色填充的方框作为占位符。 2. 当图片加载完成后，将占位符替换为实际的图片。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值