🍋
Menu
Web

Data URI

Data URI(内联数据方案)

一种URL方案,使用data:[MIME类型][;base64],<数据>格式直接在HTML、CSS或JavaScript中嵌入文件内容,无需单独的HTTP请求。

技术细节

Data URI遵循语法:data:[][;charset=<字符集>][;base64],<数据>。常用于小型SVG图标的CSS background-image、HTML中内联小图像(<2KB以避免增加HTML解析时间)和电子邮件中的内联图像。缺点包括无浏览器缓存、Base64的33%大小增长和移动设备上较慢的解析。

示例

```javascript
// Encode string to Base64
const encoded = btoa('Hello, World!');  // 'SGVsbG8sIFdvcmxkIQ=='

// Decode Base64 to string
const decoded = atob('SGVsbG8sIFdvcmxkIQ==');  // 'Hello, World!'

// File to Base64 Data URI
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
// → 'data:image/png;base64,iVBORw0KGgo...'
reader.readAsDataURL(file);
```

相关格式

相关工具

相关术语