base64嵌入仅在消除路径依赖、生成单html文件时有效，非性能优化；会使html体积增33%，无法缓存，且大图（>10kb png/>5kb jpeg）导致主线程阻塞。
Base64嵌入真能“提升图片内嵌”？先看它解决什么问题
不能笼统说“提升”，它只在特定场景下有效：消除路径依赖、生成可离线运行的单HTML文件。比如发给同事一个带图的报告，不希望对方还要配图目录；或导出可视化快照时确保截图里所有图片都“跟着走”。它不是性能优化银弹，反而会让HTML体积增大约33%，且浏览器无法单独缓存这些图片。
-
data:image/png;base64,...是唯一合法写法，漏掉data:前缀或拼错 MIME 类型（如写成image/jpg）会导致图片空白 - 不要对 >10KB 的 PNG / >5KB 的 JPEG 做 Base64，加载阻塞明显，DevTools 里能看到主线程卡顿
- CSS 中用
background-image: url(data:image/...)和 HTML 中<img src="data:image/...">行为一致，但前者更难调试（没alt、没自然宽高）
Python 一行命令生成 Base64 字符串（不用装库）
base64 是系统自带命令，Windows/macOS/Linux 都有，比写 Python 脚本更快：
base64 -i chart.png -o chart.b64
然后手动拼接：
data:image/png;base64, + cat chart.b64 的输出（去掉换行）
- macOS 上用
base64 -i chart.png | tr -d '\n'直接输出无换行字符串 - Windows PowerShell 用：
[Convert]::ToBase64String([IO.File]::ReadAllBytes("chart.png")) - 别用在线编码网站——敏感图表可能被留存或扫描
嵌入后图片不显示？90% 是这三类错误
- MIME 类型错：PNG 用了
image/jpeg，或 WebP 用了 image/png → 检查原始文件后缀和实际格式（file chart.png 可验证）
- 编码含非法字符：复制时带了 BOM 或隐藏空格 → 全选字符串，粘贴到 VS Code 里开“显示不可见字符”开关
- 字符串过长触发浏览器限制：Chrome 对单个
src 长度无硬限制，但超过 2MB 时渲染明显变慢，建议拆成多个小图或改用 Blob URL
比 Base64 更稳的替代方案：Blob URL 适合动态场景
image/jpeg，或 WebP 用了 image/png → 检查原始文件后缀和实际格式（file chart.png 可验证） src 长度无硬限制，但超过 2MB 时渲染明显变慢，建议拆成多个小图或改用 Blob URL如果图片是 Canvas 导出、截图生成或用户上传的，别转 Base64——用 URL.createObjectURL()：
const blob = await new Promise(r => canvas.toBlob(r, 'image/png')); const url = URL.createObjectURL(blob); img.src = url;
- Blob URL 是内存引用，不膨胀 HTML 体积，也不受长度限制
- 页面关闭前记得调用
URL.revokeObjectURL(url)，否则内存泄漏 - 它不能用于静态 HTML 文件分发（URL 只在当前页面生命周期有效）
真正麻烦的从来不是怎么嵌，而是嵌完之后要不要支持缩放、打印、右键另存——这些 Base64 字符串全都不认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
