二进制图片直接显示在HTML中

参考:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

参考Data_URIs的方式，把二进制文件直接显示在网页中

格式

data:[<mediatype>][;base64],<data>

• 固定前缀data:

• mediatype:文件类型,默认是text/plain;charset=US-ASCII
  可用类型参考

  https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

例如

data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

• base64
  是否通过base64编码

• ，data
  二进制文件内容

比如要显示一个png图片的二进制文件，可以先读取图片内容，做base64的编码

<img src="data:image/png ;base64, <data>">