Less的data-uri()函数需用相对当前文件的静态路径（如data-uri("img/icon.png")），不支持变量拼接；文件必须存在且格式受支持（如.svg需无BOM和XML声明），否则静默降级为url()；注意Safari对content:url(data:)不支持、CSP需显式添加img-src 'self' data:。
Less 的 data-uri() 函数怎么写才不报错
直接用 data-uri("path/to/icon.png") 就行，但实际踩坑点远不止路径对不对。它不是简单“转成 Base64”，而是一套带 fallback 和 MIME 推断的编译逻辑。
- 路径必须是相对当前 Less 文件的静态路径，不能是变量拼接（
@icon-path: "icons/close.svg"; data-uri(@icon-path)会失败） - 如果文件不存在，Less 编译器通常静默降级为
url("...")，而不是报错——你得手动检查最终 CSS 里是不是还写着url(而不是data: - MIME 类型由文件扩展名推断：.png →
image/png，.svg →image/svg+xml，但 .svg 如果含中文或 XML 声明（如），可能解码失败；建议先用svgo压缩并移除 BOM - 不支持 WebP、AVIF 等新格式，.webp 文件会被当成未知类型，直接 fallback 到
url()
为什么 data-uri() 生成的 Base64 在 Safari 里不显示
不是编码问题，是 Safari 对伪元素 + content: url(data:...) 的支持有缺陷。它能渲染 background-image: url(data:...)，但在 ::before { content: url(...) } 场景下常为空白，且无任何控制台提示。
- 规避方式：统一改用
background-image+padding/width/height模拟图标，别依赖content - 如果你非要用
content（比如纯字符图标需居中），宁可走雪碧图或字体图标，别碰data-uri()+content - 注意：IE8 虽老，但对
data-uri()的background-image支持反而是最稳的；现代兼容性问题主要出在 Safari 和 CSP 上
构建时怎么控制哪些图该内联、哪些不该
data-uri() 是编译期行为，没法 runtime 切换。想精细控制，得靠构建工具配合路径约定或条件编译，而不是全靠 Less 函数。
- Webpack 用户：用
url-loader的limit（推荐设为4096，即 4KB），比 Less 的data-uri()更可控；它还能自动处理@import引入的 CSS 中的url() - Vite 用户：
import icon from './icon.svg?inline'返回的是字符串，不是 Base64，要手动btoa(encodeURIComponent(svgString))——但遇到中文或就容易崩，不如直接用?url让它吐 base64 字符串 - Less 层面的土办法：建两个目录，
assets/inline/下放小图标，只在这个目录里用data-uri()；assets/img/下放大图，强制走 HTTP 请求
CSP 报错 Refused to load the image 怎么加白名单
只要页面启用了 Content-Security-Policy，Base64 图片默认被拦——因为 data: 协议不在 default-src 'self' 或 img-src 'self' 范围内。
- 必须显式加
img-src 'self' data:，注意末尾有空格和冒号，data:是一个完整源（source），不是通配符 - 如果用 Nginx，响应头加：
add_header Content-Security-Policy "img-src 'self' data:"; - 开发时容易忽略：本地
file://协议下 CSP 不生效，但上线后一模一样的代码就挂了，务必在 staging 环境提前测 - 别写成
img-src data:（缺'self'），否则连正常图片请求也会被拦
真正难搞的不是怎么生成 Base64，而是判断“这张图值不值得塞进 CSS”——尺寸、复用频次、缓存策略、CSP 配置、Safari 行为，这些全得串起来看。一个 6KB 的 SVG 图标，在 Webpack 里设 limit=8192 就内联；在 Less 里硬写 data-uri()，却可能因 svgo 没跑、BOM 残留、或路径写错，最后编译出来还是普通 url。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
