data uri scheme 的基本写法为 data:[mime类型];base64,...，需严格匹配 mime 类型（如 image/png、image/svg+xml），base64 字符串须无换行空格；chrome、firefox、edge（chromium）及 safari 14+ 支持 png/jpg/gif/svg，旧版 safari 对 svg mime 要求严格，ie 仅支持 ≤32kb 的 gif/png。
data URI scheme 的基本写法和浏览器兼容性
直接在 url() 里用 data:image/png;base64,... 是可行的，但不是所有格式都默认支持。Chrome、Firefox、Edge（Chromium版）和 Safari 14+ 都支持 png、jpg、gif 和 svg+xml；Safari 旧版本对 svg+xml 要求 MIME 类型严格匹配，比如必须写成 data:image/svg+xml;base64,...，写成 data:image/svg;base64 会失败。
常见错误现象：Failed to load resource: net::ERR_INVALID_URL 或图片空白——大概率是 MIME 类型拼错、base64 字符串含换行或空格、或用了不支持的格式（如 WebP 在 Safari 15 以下不支持 data URI）。
- MIME 类型必须准确：PNG →
image/png，JPEG →image/jpeg，SVG →image/svg+xml - base64 字符串不能含换行符、制表符或前后空格（可用
base64 -w 0命令生成无换行字符串） - IE 仅支持 ≤32KB 的 data URI（且只认
image/gif和image/png），超出会静默失败
如何用命令行快速生成合法 base64 字符串
别依赖在线编码网站——容易混入 BOM、不可见字符或错误换行。终端一行搞定：
base64 -i icon.png | tr -d '\n'
macOS 上 base64 默认每 76 字符加换行，tr -d '\n' 清除它；Linux 用户若用 base64 -w 0 更直接。注意：文件路径不能有中文或空格，否则需引号包裹或先 cd 进目录。
如果要嵌入 SVG 文件（文本型），别用二进制 base64 编码——直接 URL 编码更轻量：
background-image: url("data:image/svg+xml,%3Csvg...%3E");
但注意：SVG 中的双引号、尖括号、& 符号必须手动 encodeURIComponent（或用工具转义），否则 CSS 解析会中断。
CSS 中使用 data URI 的实际写法与性能权衡
直接写在 background-image、content（配合 ::before）、或 list-style-image 都可以，但要注意体积和复用性：
- 单张小图标（≤2KB）适合内联，避免 HTTP 请求；超过 4KB 就得权衡：gzip 后普通图片请求可能比冗长 base64 字符串更省带宽
- 不要在多个选择器里重复粘贴同一段 base64——CSS 不会缓存 data URI，每处都会增加 CSS 文件体积
- 修改图片后必须重新生成并替换所有出现位置，维护成本高；建议只用于极少变动的装饰性图标（如加载 spinner、禁用态 icon）
- DevTools 里无法右键“在新标签页查看”该图片，调试时不如真实 URL 方便
遇到 background-image 不生效的排查点
最常卡在这几个地方，不是语法错，而是细节漏了：
- CSS 选择器优先级太低，被其他
background-image: none覆盖（用 DevTools 检查 computed 样式） - base64 字符串开头多了空格或
\n，导致url( data:image/... )中间有非法空白（url(和data:之间不能有空格） - 用了
background简写属性覆盖了background-image，例如background: #fff;会清掉之前设的 image - SVG data URI 中引用了外部资源（如
<image xlink:href="..."></image>），data URI 下这些链接全部失效
真正麻烦的是 SVG 里带字体或渐变——它们不会随 data URI 一起打包，得内联定义或改用纯 shape 描述。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
