今天在浏览网站时发现了一个很奇妙的实现，于是就看了下页面的源码，发现页面中引入了一个很奇怪的URL（data:image/jpeg;base64,/9j/4QecRXhpZgAATU0AKgAAAAgABwESAAMA...）,在chrome浏览器的network下看了下，确实发了一个这样的请求，但是没有指定ip，没有请求头，没有响应头，只有一大串字符串，请求会发去哪里呢？好奇的在google上搜了下，原来这是一种data类型的URL格式，可以把小数据直接嵌入到URL中，浏览器会自动解析data：后面的数据。
例如：在浏览器的地址栏中输入
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
就会在浏览器中看到Hello，world!,也就是data:text/html后面的数据直接用做网页的内容，而不是网页的地址。
再例如：
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D
会在浏览器中看到一张1×36的png图片。
在上面的data url中，data表示取得数据的协定名称，image/png是数据类型名称，base64是数据的编码方法，关于base64是网络上最常见的用于传输8bit字节代码的编码方式之一，可用于在http环境下传递较长的标识信息，逗号后面就是这个image/png文件base64编码后的数据。
目前data类型的url支持的类型有：
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图片数据
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小，而且不会缓存图片。所以对“小”数据特别有好处。
分享到：
相关推荐
【数据类型URL格式详解】 数据类型URL（Data URL Scheme）是一种在Web开发中用于嵌入小型数据块到HTML文档或CSS样式表中的方法。这种格式最初在1998年的RFC2397中被定义，目的是为了允许开发者直接在页面内包含小量...
此资源的全名是"data_url-1.0.1.tar.gz"，表明它是一个版本号为1.0.1的data_url库的压缩文件，采用tar.gz格式打包。 在Python开发中，经常需要处理数据URL，这是一种将小量数据直接编码为URL的方式，常用于在HTTP...
Data URL由"data:"前缀开始，后面跟随媒体类型（MIME type），接着是编码的数据。对于图像，常见的媒体类型有"data:image/jpeg;base64,"，其中"base64"表示数据被编码为Base64格式。这种技术常用于减少页面加载时间...
在Web开发中，`multipart/form-data`是一种用于发送表单数据的编码类型，尤其适用于处理文件上传。此编码方式能够使客户端浏览器将表单中的普通文本字段与文件字段一起发送到服务器端进行处理。 #### 标题解析 - **...
2. **数据URL解析**：库提供了解析Data URL的能力，将Data URL分解为它的组成部分，如媒体类型（MIME type）、编码方式和实际数据。 3. **数据转换**：`dataurl`库可能支持将不同格式的数据相互转换，比如将Base64...
此外，数据导入导出功能也相当完善，无论是CSV格式还是其他数据库，DataGrip都能轻松应对。 总之，DataGrip作为一款强大的数据库管理工具，凭借其丰富的功能、智能的提示和用户友好的界面，为开发者提供了高效的...
`dataload` 是一个高效的数据录入工具，主要针对Oracle数据库系统设计，但同样适用于其他类型的数据库。它的核心功能是通过模拟键盘输入的方式，将大量数据批量导入到数据库中，大大提高了数据录入的效率和准确性。...
- "FinalData使用方法及注意事项.url"是一个网页链接，指向FinalData的使用指南和注意事项。 - FDIDE.VXD是FinalData的一个驱动程序文件，可能用于与硬件交互。 总的来说，FinalData是一款强大的数据恢复工具，能够...
数据类型指定了Data URI所包含的数据格式。常见的类型包括但不限于： - `image/*`：用于图像文件。 - `text/*`：用于纯文本文件。 - `application/*`：用于应用程序数据。 例如，`data:image/png`表示该Data URI...
此外，Ext.data还支持通过不同的方式获取这些数据格式的数据： - **Memory**：在客户端内存中存储数据。 - **HTTP**：通过HTTP协议从服务器获取数据。 - **ScriptTag**：使用脚本标签注入的方式来获取数据。 如果...
URLSession.shared.dataTask(with: url) { [weak self] (data, response, error) in if let error = error { print("Error fetching data: \(error.localizedDescription)") return } guard let data = data...
本文将深入探讨如何在C++中实现一个HTTP服务端，尤其是处理HTTP POST请求，特别是接收form_data类型的文件，如图片。这在现代Web开发中是非常常见的场景，例如用户上传头像或者分享照片。 首先，理解HTTP协议的基础...
dataURI是一种URL scheme，它允许在单一的URL内直接包含文件内容。其基本格式如下： ``` data:[][;base64],<data> ``` mediatype是数据类型，如image/svg+xml；base64是一个可选的编码方式，用于对数据进行编码。...
- **url** (字符串类型)：表示要访问的目标URL地址。 - **pars** (字符串类型)：如果请求方式为POST，则此参数表示要发送的数据（通常为JSON格式）；如果请求方式为GET，则此参数会被添加到URL后面作为查询字符串的...
在IT行业中，尤其是在前端开发领域，数据字典（Data Dictionary）是一种重要的概念，它用于存储和管理应用系统中的数据信息，如字段名、字段类型、字段长度等元数据。在这个场景下，"avue-crud-数据字典（网络-...
关于实体关联关系，SpringDataJPA支持多种关联类型，如一对一、一对多、多对一和多对多。以一对多为例，我们可以在`User`实体中定义一个`Set`类型的`Role`属性，表示用户可以拥有多个角色： ```java @Entity public...
这里需要注意的是，当发生异常时，程序会返回相应的错误代码，并通过变量 `c_type` 和 `c_msg` 记录错误类型和消息。 #### 2. 设置 HTTP 请求头 创建好 HTTP 客户端后，接下来要设置 HTTP 请求头，这通常包括定义...
WebAPIFileUploadDemo是一个示例项目，展示了如何使用ASP.NET Web API处理这种类型的数据传输，特别是利用`multipart/form-data`编码方式。这个教程将深入探讨这个过程，并提供客户端和服务器端的关键代码片段。 ...
Intent分为显式Intent和隐式Intent，而"Intent总结04 Data和Type属性"主要聚焦于Intent的数据(data)和类型(type)两个关键属性，它们在创建Intent时发挥着至关重要的作用。 1. **Intent的数据(data)**: Intent的数据...
- **新索引类型：** 增加了2D Sphere索引，支持地理空间查询，以及Trie索引，提高了文本搜索的性能。 - **写操作增强：** 包括`bulkWrite`操作，提高了批量插入和更新的效率。 - **安全增强：** 引入了认证机制的...