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

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

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

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" οnerrοr="this.style.display='none'"/>
2、用默认的图片替换:
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" οnerrοr="this.src='默认图片的url地址'"/>


注意:如果使用不当,在IE内核的浏览器下会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,就会反复的加载,最后造成堆栈溢出错误。
因此, 需要用下面两种方法解决:
a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。
b、控制onerror事件只触发一次,需要增加这句话:this.οnerrοr=null; 增加后如下:
 
为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" οnerrοr="this.src='默认图片的url地址;this.οnerrοr=null'"/>


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








  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 如果图片不是很大,您可以使用以下HTML代码将整张图片显示在页面上: ``` <img src="image.jpg" alt="description of image" width="100%"> ``` 将 "image.jpg" 替换为您的图片文件名,"description of image" 替换为您的图片描述,"100%" 可以设置为其他百分比或像素值,以控制图片的大小。 ### 回答2: 如果图片不是很大,想让整张照片显示出来可以通过以下几种方法来实现。 首先,可以调整网页或应用程序的布局,使得照片能够完整展示在页面中。通过增大照片的显示区域,确保不会有任何内容被裁剪或缩小,让整张照片都能够被用户看见。 其次,可以对图片进行缩放处理,将其调整为适应屏幕大小的尺寸。这样做可以确保整张照片在网页或应用程序中显示不会因过大而导致加载慢或使页面变得不美观。同,缩放后的照片也可以避免出现用户需要左右拖动才能完整浏览的情况。 另外,可以在图片上添加全屏模式的按钮或功能,让用户在需要可以将图片以全屏的形式显示。通过点击该按钮或使用相应的手势操作,用户可以将照片完全展开并填满整个屏幕,以便更仔细地观察细节或欣赏照片的美感。 总之,针对图片不是很大的情况,可以通过调整布局、缩放处理或添加全屏功能来确保整张照片能够在页面中完整显示,并提供更好的用户体验。 ### 回答3: 如果图片不是很大,我想让整张照片显示,可以通过几种方法来实现。首先,你可以调整浏览器的缩放级别,以便图片可以完整显示在屏幕上。另外,你也可以使用图片编辑软件,将图片的尺寸调整为适合屏幕显示的大小。这样,无论在什么设备上查看图片,都能够显示整张照片而不被裁剪或缩小。此外,你还可以选择在图片上添加黑色边框,以填补图片与屏幕之间的空白位置,确保全景照片的完整展示。总之,通过适当的调整和编辑,你可以确保整张照片在屏幕上完整显示,使观看者能够欣赏到照片的全部内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值