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