data格式加载图片

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及以上、谷歌、火狐浏览器才支持。

github.com/nathanmarz
www.servicestack.net shuttle.codeplex.com
www.kentico.com
datarelay.codeplex.com
www.postsharp.net