data:image/png;base64用法

参考文章：前端-Data URI Scheme

Data URI Scheme

data URI scheme 允许我们使用内联（inline-code）的方式在网页中包含数据，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。常用于将图片嵌入网页。

img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAWCAYAAAArdgcFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAABSUlEQVQ4Ee1VPUsDQRB9s3dBRCRNQvCjkDQW/hJ/gb9AOwWDoIXFgYXYXGP+hYW1/gIr7WzsE8VGxZBcwt04dznCJWw2twtWutXMmzdvlrd7t4SZVbvi1ZihZuCFqT9A/B7Qd5FI44RpPcQpE1oC1IsEq5jRBeGyc0zXaV8mvhbyOREurIRMZMZhp0VthYB9mXBi4jrUztIev1bNbKg6CMxvIWwg5GWVDOHNZ7lX6l/wrG+Fzbh/ca1bf9QWBhKtHznobgtjKF92ZBL3TUWpRbK7LhiVCY8kY3xK/iTiexNcEywSXxKBrfHvrdBN2JRsp4BoQ3dbtHLT4K+JqxWw8vr4YDaf+vR+SmXRWw99lT9N96VaypIYtwgoyWyJRtiX3T+X7TXxROcxGeAo5chlyNcBVxrb2JVpTUHsz4IQi/DL6wPucENxqvoDx69PXP8OKn4AAAAASUVORK5CYII=" /

###Data URI的格式规范

data:[][;charset=][;],
1. data ：协议名称；
2. [] ：可选项，数据类型（image/png、text/plain等）
3. [;charset=] ：可选项，源文本的字符集编码方式
4. [;] ：数据编码方式（默认US-ASCII，BASE64两种）
5. , ：编码后的数据

###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图片数据