网页中如何设置默认图片? 下面本篇文章就来给大家介绍一下在网页中设置默认图片, 防止当图片资源失败时出现的问题. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
现在网页中图片随处可见, 但避免不了有时会出现图片资源失败的情况, 在谷歌浏览器中就会显示这样
<img src="logo.jpg" alt="logo">
这里的 alt 属性是为了当图片加载失败时告诉用户图片信息的
能不能美化一下呢?
下面给出几种方式
JS 方式
相信大家碰到这种问题是, 搜索的结果一般都是用图片的 onerror 方法
onerror 事件会在文档或图像加载过程中发生错误时被触发.
在装载文档或图像的过程中如果发生了错误, 就会调用该事件句柄.
使用方式也很简单
<img src="logo.jpg" alt="logo" onerror="this.src='https://xxx.img/logo.png'">
但是, 这个方法一定要注意, 保证 onerror 里面赋值的图片地址一定不能出错, 否则, 就会无限调用 onerror...
页面直接崩掉..
有人说, 我可以保证呀. 那么, 既然能保证, 为什么还会有前面图片加载失败, 而启用备用图片的情况发生呢?
当然, 你可以采用 base64 的方式, 缺点就是太长.. 类似下面这种
- <img src="logo.jpg" alt="logo" onerror="this.src='data:image/PNG;
- base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAGXRFWHRTb2Z0d2F
- yZQBBZG9iZSBJbWFnZu...IIggggCCKAIIgAgiACCIIIIAgigCCIAIIgAgiCCCAIIoAgiAC
- CIAIIQm7xfwIMAADDZPsh5DI6AAAAAElFTkSuQmCC'">
兼容性还是可以的, 基本满足日常开发.
那么有没有 CSS 解决方式呢?
当然有, 如果只用兼容主流浏览器的话
CSS 方式
这里提供两种方式
1, 伪元素
虽然 img 是单标签 < img>, 里面不能包裹其他元素, 但是却可以包含伪元素
不过这里有个特征, 只有当图片加载失败或者没有图片的时候, 才会显示伪元素
既然如此, 我们可以用伪元素来实现一个默认提示效果
- img{
- display: inline-block;
- position: relative;
- width: 200px;
- height: 200px;
- background: #ccc;
- vertical-align: top;
- }
- img:after{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: url('img/b.jpg') #ccc;
- }
思路很简单, 就是用伪元素覆盖在原图片上, 而且图片加载失败也没什么问题, 最多不显示, 也可以以纯色背景作为默认占位图.
2, 背景图片
还有一种方式, 用到了 css3 中的多背景特性
- div{
- background:url(a.jpg),
- url(b.jpg),
- url(logo.PNG);
- }
指定的时候, 按浏览器中显示时图像叠放的顺序从上往下指定的, 第一个图像文件是放在最上面的, 最后指定的文件是放在最下面的.
这样我们也可以实现默认图片的显示
- .img{
- width: 200px;
- height: 200px;
- background: url('a.png'),url('logo.png') #f1f1f1
- }
不过这种方式本质上是多张图片重叠在一起, 如果上一层加载失败, 才会看得见底下的那一张, 也就是说如果都加载成功, 其实都是存在的. 那么就要注意了, 如果上层的图有透明部分, 就有可能看得到底下的图, 漏光了!
如上, 两张图都加载成功了, 由于上层有透明部分, 所以看到了底图. 所以在使用这种情况的时候, 需要使用. jpg 图片, 避免走光
小节
以上介绍了三种设置默认图片的方式,
从兼容性方面来讲, JS 方法适应性最广, 可以低版本兼容 IE, 其他两种就不行了, 只需注意备用图片地址不要出错就可以了
个人比较建议第二种伪元素方式, 纯 CSS 方式, html 可以不做任何修改, 适合对已有项目的体验升级, 有了体验更好, 没有也无伤大雅
第三种就可以当娱乐看看了, 当做一种思维方式吧, 毕竟没有任何语义化, 给一个 div, 别人根本就不知道这是一张图片, 对搜索引擎也不友好.
各位小伙伴还有什么更好的方式呢? ^^
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/16173.html