img标签设置默认图片

为了美观当网页图片不存在时不显示叉叉图片

当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用。
其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如:

1、让这个图片元素隐藏:

<img src="图片的url地址" alt="图片XX" onerror="this.style.display=‘none‘"/>

2、用默认的图片替换:

<img src="图片的url地址" alt="图片XX" onerror="this.src=‘默认图片的url地址‘"/>

注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。

因此, 需要用下面两种方法解决:

a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。

b、控制onerror事件只触发一次,需要增加这句话:this.onerror=null; 增加后如下:

<img src="图片的url地址" alt="图片XX" onerror="this.src=‘默认图片的url地址‘;this.onerror=null"/>

经测试,上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。

时间: 2024-12-13 10:47:01

img标签设置默认图片的相关文章

img标签使用默认图片的一种方式

基于html5提供的onerror这个时间属性. 写法如下 <img src="图片地址" onerror="javascript:this.src=\'默认的图片地址\'"> 测试如下 如图所示,显示的图片是默认图片. 以下是部分代码:分别用以下两段代码来测试 html+='<li><div class="pd"><a><img src="'+professor.img+'&quo

js解决img标签加载失败显示默认图片

问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片. $(function(){ //注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件 $("img").attr("onerror","this.src='img/error.jpg;this.onerror=null;'&

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

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

1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js") //这是jade文件的写法,可以自行转换为html handle error $('img').error(function(){ $(this).attr('src', "d

html中设置图片,可通过div和img标签设置

方法一:通过img标签的src设置照片路径: 方法二:通过div标签的background-image样式设置照片路径: img设置的照片,能够缩放,而div设置的照片,只能裁剪. dojo中dom-style设置background-image注意事项 1.background-image不能对span标签设置,标签需要定义为div 2.设置是要加上url(),格式为:domstyle.set(this.imgNode,"background","url('../asset

bootstrap对HTML标签的默认样式有哪些修改?

CSS Reset:重新设置HTML标签的默认样式. (1)重设了盒子模型的计算方法 * { box-sizing: border-box; } (2)重设了所有元素的默认字体 14px/1.42857143 "Helvetica Neue" (3)body { margin: 0; color: #333; background-color: #fff;} (4)h1~h6 { font-size: xxpx; margin-top: 20px/10px; margin-botton

重新绘制TabControl的Tabpage标签,添加图片及关闭按钮

1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using System.Drawing; 6 using System.Linq; 7 using System.Text; 8 using System.Windows.Forms; 9 10 11 namespace TabControlTest 12 { 13 public pa

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好: 眼过千遍不如手过一遍,这就把需要记忆的东西记下来. 很多时候我们遇到的情况是: 设置背景图片background-image:url(xxx.jpg); 如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了 background-size: cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域. 这个属性有四个值: length 设

vscode设置背景图片

最近在知乎上看见有人设置了vscode编辑器的背景图片,觉得很新鲜,就尝试以一下,倒是成功了. 1.首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x 2.完成第一步就已经有默认背景了,可是想设置自己喜欢的怎么办?往下看 打开 文件>首选项>设置 在右侧设置里 "background.enabled": true, "background.useDefault": false, "background.c