【前端】DataURL 用法
文章目录
- 一、基本介绍
- 二、优点缺点
一、基本介绍
Data-URL：是以data:为前缀，特殊格式的URL，可以将小文件嵌入在文档中。
/*
mediatype：表明数据类型，如image/jpeg表示一个jpeg图片文件，默认值为：text/plain;charset=US-ASCII
encoding：数据编码方式（默认US-ASCII，BASE64两种）
data：编码后的数据
*/
data:[mediatype][encoding],data
mediatype：
| 类型 | 描述 | 示例 |
|---|---|---|
| text | 普通文件 | text/plain，text/html，text/css，text/javascript |
| image | 图像文件 | image/gif，image/png，image/jpeg，image/bmp，image/webp，image/x-icon，image/vnd.microsoft.icon |
| audio | 音频文件 | audio/midi，audio/mpeg，audio/webm，audio/ogg，audio/wav |
| video | 视频文件 | video/webm，video/ogg |
| application | 二进制数据 | application/octet-stream，application/pkcs12，application/vnd.mspowerpoint，application/xhtml+xml，application/xml，application/pdf |
- 示例：先将文件转成base64编码，再通过Data URL，我们把图像内容内置在HTML 中。
<img src="/images/2024/0610/test.jpg">
<img src="data:image/png;base64,alsdkfj...">
二、优点缺点
优点：
减少 HTTP 请求，例如图片体积小，这是还占用一个请求就不值得
能够在离线情况下访问，而不依赖于外部资源的可用性
缺点：
- Base64 编码后的数据体积 会比 原数据的体积大
- Data URL 形式的图片不被浏览器缓存，每次访问页面时都会重新下载一次。
- 由于 Base64 跟 CSS 混在一起，增加了浏览器解析CSS树的耗时
- IE678 存在兼容性问题
- 不适合懒加载，可读性差，也不利于维护
