html中的图片直接使用字符串代替最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用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编码后的字符串
图片:
使用命令:
- base64android.png
产生的字符串为:
- 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
-