data uri 能实现图片内嵌，但仅适用于小而少的关键图；需确保 mime 准确、base64 无空格换行，编码后体积增33%且无缓存，动态/大图/需seo场景应避免使用。
data: URI 能完整解决图片内嵌，但不是所有场景都适合用 base64。
它确实让 HTML 变成单文件、不丢图、离线可用——前提是图片不大、数量不多、且你清楚编码膨胀和解析开销。
img 标签里直接写 data:image/xxx;base64,... 就能显示
- 浏览器原生支持，无需额外 JS 或 polyfill
- MIME 类型必须准确：PNG 用
image/png，JPG 用image/jpeg（别写成image/jpg） -
base64字符串不能换行、不能有空格或 BOM 头，否则解析失败，显示为破损图标 - 示例正确写法：
@@##@@
- 错误写法包括：
src=" data:image/... "（前后空格）、src="data:image/png; base64,..."（; base64中间多空格）
base64 编码后体积涨 33%，但浏览器解码是即时的
- 原图 100 KB → Base64 后约 133 KB，HTML 文件体积同步增加
- 对首屏关键图（如 logo、小 icon）影响极小；但塞进 5 张 2MB 的 PNG，HTML 会超 10MB，加载变卡
- 没缓存优势：每次打开都重新解码，不像外链图片可被浏览器缓存复用
- 移动端低端设备上，大 Base64 图可能触发内存警告或渲染延迟
Python 生成 Base64 字符串时，image_format 和路径最容易出错
-
image_path必须是本地绝对路径，Windows 下反斜杠要双写或用原始字符串：r"D:\img\chart.png" -
image_format必须匹配实际编码格式：-
.jpg或.jpeg→ 填jpeg -
.png→ 填png -
.gif→ 填gif
-
- 忘记
.decode()会导致bytes对象直接拼接，生成非法字符串（浏览器报Failed to load resource） - 完整关键三行：
with open(path, "rb") as f:<br> b64 = base64.b64encode(f.read()).decode()<br> full = f"data:image/{fmt};base64,{b64}"
Base64 内嵌真正的复杂点不在编码本身，而在于“什么时候不该用”：比如动态图表、用户上传图、需要 SEO 的主图、或未来要换肤/换主题的资源——这些更适合走真实 URL + CDN。把图硬塞进 HTML，省事是一时的，维护成本藏在后面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
