html img 使用data格式加载图片
背景
这久闲来无事给一位客户测试一款体检软件,是winform结构的,其中有一个功能是需要把生成的体检报告导出为html格式。测试导出后直接在谷歌浏览器里查看,体检详细内容、医生签名、条形码都能正常显示。关闭浏览器准备进行下一项测试,这时发现导出的就一个html文件,桌面上扫了好几遍也没看到医生签名和条形码这两个图片文件。心想这怎么能难倒我,也是重新在浏览器里打开,按下F12看个究竟。不过看了之后更让我纳闷了,img标签的src属性并不是显示图片的路径,而是一大堆字符<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAA...SAAAAABJRU5ErkJggg==" />,内容实在太长中间的"..."省略了大部分。研究了半天也看不出个所以然,但是从base64字样看得出后面的那堆字符应该是base64编码的字符串。难道是把图片编码为base64?心里一个大大的疑问。接触html这么久,也做了很多网站,可从未见过这种方式加载图片,甚至也从没听说过,难道是自己out啦!带着心中的疑问,迅速打开w3cschool找到介绍img标签的内容,仔细的看了一遍二遍,也没找到有价值的线索,这东西还真悬乎。看来只能寄希望于百度了,很麻利的输入关键字百度一下回车OK,打开搜索到的第一个链接,没让人失望就是我要找的答案,仔细阅读原来真是这么回事。
原来如此
这是什么呢,来扫下盲。Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
下面这幅图就是就是使用这种方式显示的,有兴趣你可以F12看下代码哦。
我们可以直接把这串字符粘贴到浏览器地址栏里,回车后就能看到图片。但不是任何浏览器对支持,需要IE8及以上、谷歌、火狐浏览器才支持。
最新文章
- phantomjs 双向认证,访问nginx,https
- [转]抓取安卓APP内接口的方法--Charles
- NFS挂载操作指南
- Stream消息流 和 Stream Grouping 消息流组
- Xcode5下去除Icon高光
- hdu 2824 The Euler function(欧拉函数)
- 基于visual Studio2013解决C语言竞赛题之1003字母打印
- height:100%失败
- 写作Openwrt固件
- css background之设置图片为背景技巧
- IDEA汉化教程
- python-directory
- python 面向对象编程 之 析构方法
- python的数字图像处理学习(3)
- Linux命令(二十五) 磁盘管理命令(三) fdisk
- Apache mod_rewrite实现HTTP和HTTPS重定向跳转
- python基础之01数据类型-变量-运算浅解
- 【jQuery】将form表单通过ajax实现无刷新提交
- symfony4 404页面未找到
- Elasticsearch 映射操作