html中的图片直接使用base64编码后的字符串代替

最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme.

Data URI scheme支持的类型有：
data:,文本数据
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图片数据

自己做了一个简单的页面,点击查看测试页面,大家可以看一下源码.整体上操作如下:

1 base64编码图片

linux下直接可以使用base64+图片路径就可以产生base64编码后的字符串

图片:
 
使用命令:
base64 android.png
产生的字符串为:

直接使用<image src="data:image/png;base64,上述字符"> 就可以了.