Less的data-uri()函数需静态路径、不支持变量或构建别名，SVG易因BOM/XML声明静默降级，Safari不支持content:url(data:)，CSP须配置img-src 'self' data:。
Less 的 data-uri() 函数确实能省掉 HTTP 请求，但**它不是“写了就生效”的万能开关**——编译期静默失败、路径错位、格式踩坑、Safari 渲染空白，才是日常真实状态。
data-uri() 路径必须静态且相对当前 .less 文件
它不支持变量拼接、不解析构建时路径别名（如 @/assets）、也不认 Webpack 的 ~ 别名。路径必须是字面量字符串，且以当前 .less 文件为基准计算。
-
data-uri("icons/close.svg")✅ —— 假设 icons/ 与当前 .less 同级 -
data-uri("../images/logo.png")✅ —— 显式向上跳一级再进 images/ -
@icon: "icons/close.svg"; data-uri(@icon)❌ —— 变量会被忽略，直接 fallback 成url("") -
data-uri("~@/assets/icon.svg")❌ —— 构建工具别名在 Less 编译阶段尚未介入
SVG 和 PNG 行为差异大，尤其 SVG 容易静默降级
data-uri() 对 SVG 的 MIME 推断和解码非常脆弱，稍有异常就退化为 url()，且不报错。
- 文件必须无 BOM、无 XML 声明（如
<?xml version="1.0"?>）——否则 Base64 解码失败 - 推荐用
svgo预处理：svgo --multipass --precision=1 icon.svg -o icon.min.svg - .webp、.avif 等新格式不被识别，直接 fallback；仅支持
.png、.jpg、.gif、.svg - 检查最终 CSS：如果看到
background: url("icon.svg")而非url("data:image/svg+xml;base64,...")，说明已静默失败
content: url(data:) 在 Safari 中根本不可靠
这不是编码问题，是 Safari 对伪元素中 content: url(data:...) 的实现缺陷——常渲染为空白，控制台零提示。
-
::before { content: url("data:image/svg+xml;base64,..."); }→ Safari 下大概率不显示 -
background-image: url("data:image/svg+xml;base64,...");→ 所有现代浏览器均正常 - 若需居中/对齐图标，优先用
background-image + background-position+ 固定尺寸容器，而非依赖content - 真要靠
content显示纯图标？改用字体图标或 inline SVG，别碰data-uri()+content
构建层比 Less 层更适合做内联决策
data-uri() 是编译期硬编码，没法按文件大小、目录、环境动态开关。真正可控的方案在构建工具里。
- Webpack 用户：用
url-loader+limit: 4096，自动对 ≤4KB 图片转 Base64，支持所有url()场景（含 @import 的 CSS） - Vite 用户：写
import icon from './icon.svg?url'，它会返回完整data:字符串，无需手写data-uri() - Less 层土办法：只在
assets/inline/目录放小图，并约定所有引用都走该路径，配合 lint 规则禁止跨目录调用
最常被忽略的一点：即使成功生成了 Base64，也要确认 CSP 策略是否允许 img-src 'self' data:；否则 Chrome/Firefox 会直接拦截，连 fallback 的 url() 都不走。这问题在线上环境才暴露，本地开发永远测不出来。
