HTML与CSS中加载Base64编码图片以及Data URL说明

使用SRC属性

直接实用<img>标签的src=""属性是最为方便的方法，示例如下，可以去百度搜在线Base64转图片，就有很多在线工具可以直接用

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA7UlEQVRIDbVUWw7CMAxLEefjsLseHzBX85SmaVLYOslrHs6rGYgsforJ/1G69SmXK7qxD5d6o/EZ5GJH2STkuamWTzAq8FLtoMMIpOoY2mRU4CRcFaICuiPIAOtBBrROuTm5ZFxB4ziU93HyyHTymK/wC6GBBN0dbTPnZkhdgX8Tm7zCQiXaAYJABCB7gA/wfNWWFaikKy8ueZQju7LMv/538MtXZO/a695y0iWPrm7aziVjEiAK1B1r2YtBLkBGS9ajZsk0tyvGCTrHXYY6xp6MfxXUd5PQBnkGXuz6JXudoXPA80U2xAANZ/kOvjCWJznArFQaAAAAAElFTkSuQmCC"/>

使用CSS加载

上面的方案会导致html文件难以编辑，图片越大编码会越长，对代码的修改增加了麻烦，下面使用css加载会使html文件更加简洁

CSS

.img {
content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA7UlEQVRIDbVUWw7CMAxLEefjsLseHzBX85SmaVLYOslrHs6rGYgsforJ/1G69SmXK7qxD5d6o/EZ5GJH2STkuamWTzAq8FLtoMMIpOoY2mRU4CRcFaICuiPIAOtBBrROuTm5ZFxB4ziU93HyyHTymK/wC6GBBN0dbTPnZkhdgX8Tm7zCQiXaAYJABCB7gA/wfNWWFaikKy8ueZQju7LMv/538MtXZO/a695y0iWPrm7aziVjEiAK1B1r2YtBLkBGS9ajZsk0tyvGCTrHXYY6xp6MfxXUd5PQBnkGXuz6JXudoXPA80U2xAANZ/kOvjCWJznArFQaAAAAAElFTkSuQmCC");
}

HTML

<img class="img">

Data URL 说明

data:image/png是Data URL，代表数据类型，这里表示为图片，下面是更多的Data URL

Data URL	说明
data:text/plain	文本数据
data:text/html	HTML代码
data:text/css	CSS代码
data:text/javascript	Javascript代码
data:text/html;base64	base64编码的HTML代码
data:text/css;base64	base64编码的CSS代码
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图片数据