html img 使用data格式加载图片

时间:2023-03-08 16:45:50

背景

这久闲来无事给一位客户测试一款体检软件,是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看下代码哦。

html img 使用data格式加载图片

我们可以直接把这串字符粘贴到浏览器地址栏里,回车后就能看到图片。但不是任何浏览器对支持,需要IE8及以上、谷歌、火狐浏览器才支持。