# 将图片转成datauri嵌入到html
30 秒速记
Data URI= 把图片字节转成Base64文本，直接写进src：data:image/png;base64,iVBOR...- 好处：少一次
HTTP请求；代价：体积大约多33%，而且没法单独缓存，跟着HTML/CSS一起下载 - 只适合几
KB的小图标；大图内联会拖慢首包和解析 - 构建工具自动做：
Vite默认assetsInlineLimit是4096字节，Webpack 5的asset默认阈值是8KB MIME要写对；用户上传的SVG/HTML别随便内联，有脚本注入风险
Data URI 就是把图片的二进制内容编码成一段文字，直接塞进 HTML 里，浏览器不用再单独请求这张图。 打个比方，原来是在页面上写一个「图片在哪」的地址，现在是把图片本身抄进页面。省了一次请求，但 Base64 编码会让体积多出三分之一，而且图片和页面绑在一起，页面一改图片也得重新下，所以只适合很小、不常变的图标。现在一般不手写，Vite 和 Webpack 都会按体积阈值自动决定要不要内联。
理解「将图片转成datauri嵌入到html」时，要先明确输入、运行阶段和可观察输出。这里的交互实验会分别执行正常路径与失败路径，并把 Node.js 的关键状态变化和同屏代码对应起来；不能只记命令名称。
工程中还要验证退出码、资源清理和异常输入。属于 module 场景的配置应保持最小可复现，并在开发环境与 CI 中使用相同命令复跑，避免把平台差异或隐式默认值带到线上。
在 Node.js 里生成 Data URI 只要三步：按二进制读文件、转 Base64、拼前缀。
const fs = require('fs')
const path = require('path')
const MIME = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif', '.webp': 'image/webp' }
function toDataUri(file) {
const mime = MIME[path.extname(file).toLowerCase()]
if (!mime) throw new Error(`不支持的图片类型：${file}`)
const base64 = fs.readFileSync(file).toString('base64') // 不传编码，拿到的是 Buffer
return `data:${mime};base64,${base64}`
}
console.log(toDataUri('logo.png').slice(0, 30)) // data:image/png;base64,iVBORw0K
什么时候值得内联，可以按这几条判断。第一看体积，几百字节到几 KB 的图标、小背景图，省下的请求开销比多出的 33% 体积划算；几十 KB 的图片就别内联了。第二看复用，一张图在很多页面出现，单独文件能被浏览器缓存一次到处用，内联则每个页面都要重复下载。第三看更新频率，内联的图会跟着 HTML 或 CSS 一起失效，图不变但页面频繁发版的话，图也被反复下载。
HTTP/2 普及之后，多路复用让「请求数多」的代价小了很多，内联的收益也跟着变小，所以构建工具的默认阈值都只有 4KB 到 8KB。另外 SVG 可以不转 Base64，直接用 encodeURIComponent 编码后写成 data:image/svg+xml,...，体积更小；但如果 SVG 来自用户上传，要先清洗掉里面的脚本和事件属性。
面试官追问
追问 1把首页所有图片都转成 Data URI，首屏会更快吗？
大概率更慢。HTML 体积暴涨，首包变大，浏览器要等这一大坨下载完才能开始解析后面的内容，图片也失去了独立缓存和懒加载。几 KB 以内的小图标内联才划算。
追问 2为什么 Base64 后体积会变大三分之一？
Base64 每 3 个字节编成 4 个字符，每个字符只携带 6 位信息，所以是 4/3 倍。开了 gzip 能压回来一部分，但还是比原图大。
追问 3用 Node.js 把一张图转成 Data URI，最短怎么写？
先 fs.readFileSync('a.png').toString('base64') 拿到编码，再在前面拼上 data:image/png;base64,。读的时候别传 'utf8'，图片是二进制，按文本读会把字节弄坏。
追问 4项目里谁来决定一张图内联还是单独文件？
交给构建工具。Vite 用 build.assetsInlineLimit，Webpack 5 用 type: 'asset' 配 parser.dataUrlCondition.maxSize，小于阈值自动转 Data URI，大于就输出文件，不用手动维护。
追问 5CSP 开了之后内联图片显示不出来，为什么？
img-src 没放行 data: 协议。加上 img-src 'self' data: 就行，但别顺手给 script-src 也加 data:，那等于开了脚本注入的口子。
# 问题：将图片转成datauri
30 秒速记
- 「
Node.js读图转Base64」真正想要的是：把图片嵌进网页 → 生成Data URI - 光有
Base64不够，浏览器认的是带前缀的完整格式：data:image/png;base64,+ 编码 - 读文件别指定
'utf8'，图片要按二进制（Buffer）读 MIME要和真实格式一致，格式多了别全写死image/png
这个问题表面是「怎么把图片读成 Base64」，实际要解决的是「怎么把图片直接嵌进网页」，答案就是生成 Data URI。 很多人卡在只拿到了 Base64 字符串，直接塞进 src 发现是破图，因为浏览器需要知道这段文字是什么类型、用什么编码，所以前面得加上 data:image/png;base64,。Node.js 里一行就能搞定：fs.readFileSync(file).toString('base64')，注意读的时候别传 'utf8'，不然二进制字节会被当成文字解码，图就坏了。
今天，在QQ群有个群友问了个问题：“nodejs读取图片，转成base64，怎么读取呢？” 想了一下，他想问的应该是 怎么样把图片嵌入到网页中去，即如何把图片转成对应的 datauri。
是个不错的问题，而且也是个很常用的功能。快速实现了个简单的demo，这里顺便记录一下。
面试官追问
追问 1拿到 Base64 字符串直接赋给 img.src，为什么是破图？
浏览器会把它当成一个相对路径的 URL 去请求，当然请求不到。要拼成 data:image/png;base64,xxx，浏览器才知道这是内联数据。
追问 2fs.readFileSync(file, 'utf8') 再转 Base64，图片显示不出来，为什么？
按 utf8 解码时，不合法的字节会被替换成 U+FFFD，原始字节已经丢了，再编码回去也还原不了。图片要直接拿 Buffer 转：fs.readFileSync(file).toString('base64')。
追问 3接口返回裸 Base64 还是完整 Data URI？
只给页面用的话返回完整 Data URI，前端拿来就能用。如果还要存库、传给别的系统，返回 { mime, base64 } 两个字段更清楚，裸 Base64 不带类型，调用方只能靠猜。
追问 4允许用户传任意格式的图片，转换时要注意什么？
MIME 别信扩展名，最好读文件头判断真实类型，并且只放行白名单里的格式。尤其是 SVG，它本质是 XML，能带脚本，用户上传的要先清洗。
# 实现思路
30 秒速记
- 三步：读图片二进制 → 转
Base64字符串 → 拼成Data URI - 格式：
data:[<mediatype>][;base64],<data>，中间不能有空格 PNG示例：data:image/png;base64,iVBORw0KGgo...，PNG编码后总是以iVBOR开头Base64只是编码，Data URI是一种URL协议，前者是后者的一部分
实现就三步：读出图片的二进制，转成 Base64 字符串，再拼上 data:image/png;base64, 前缀。 Data URI 的格式是 data:[类型][;base64],数据，冒号、分号、逗号都得在，而且整串里不能夹空格，写文档时为了好看加的空格照抄进代码，浏览器就不认了。PNG 的文件头编码后总是以 iVBOR 开头，调试时看一眼这几个字符就能知道读得对不对。
const buf = fs.readFileSync('logo.png')
const uri = `data:image/png;base64,${buf.toString('base64')}`
console.log(uri.slice(0, 27)) // data:image/png;base64,iVBOR
思路很直观：1、读取图片二进制数据 -> 2、转成base64字符串 -> 3、转成datauri。
关于base64的介绍，可以参考阮一峰老师的文章
