51工具盒子data:image/png
data: image/png； base64 用法详解 ( 作用，语法，优缺点 ){#articleContentId}
网页上有些图片的 src 或 css 背景图片的 url 后面跟了一大串字符，
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAQMAAAC032DuAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABFJREFUKM9jYBgFo2AU0AsAAANwAAGRWmMdAAAAAElFTkSuQmCC
① 在 HTML 中使用 data URL （不建议这样使用）
<img alt='白眉大叔' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQAQMAAAC032DuAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABFJREFUKM9jYBgFo2AU0AsAAANwAAGRWmMdAAAAAElFTkSuQmCC" class="avatar avatar-80 photo lazyload" height='80' width='80' data-src="https://www.baimeidashu.com/wp-content/uploads/2023/02/原版卡通头像-scaled-80x80.jpg" decoding="async" /><noscript><img alt='白眉大叔' src='https://www.baimeidashu.com/wp-content/uploads/2023/02/原版卡通头像-scaled-80x80.jpg' class='avatar avatar-80 photo' height='80' width='80' data-eio="l" /></noscript> 白眉大叔 </a>
② 在 CSS 中使用 data URL
body {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxA
fBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC")
};
③ 在 script 中使用 data URL
_captchaImage() {
captchaImage().then(res => { //请求接口
if (res.code == 200) {
this.codeUrl = 'data:image/gif;base64,' + res.img; // 拼接请求回来的数据
this.formModel.uuid = res.uuid;
}
});
},
3. Data URI scheme 的优缺点
优点：
减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。 对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。可以把整个多媒体页面保存为一个文件。
缺点：
- 无法被重复利用，同一个文档多次被应用到同一内容中，数据被大量增加，消耗了下载时间。
- 无法被独自缓存，其包含文档重新加载时，它也要重新加载。
- 耗时，客户端需要重新解码和显示，增加消耗。
- 不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多
- 不安全，不利于安全软件的过滤，同时也存在一定的安全隐患。
（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。
