Base64图片可直接嵌入img标签src属性，格式为data:mimetype;base64,字符串，需确保MIME类型正确、无换行空格；大图不适用，JS动态赋值更利于校验与降级。
Base64 图片可以直接嵌入 HTML 的 <img> 标签中，无需额外 HTTP 请求，适合小图标、占位图或离线场景；但体积比原始二进制大 ~33%，不适用于大图。
直接写在 src 属性里
这是最常用也最简单的方式：把 Base64 字符串拼到 data: URL 协议中，注意 MIME 类型必须匹配（如 image/png），否则浏览器可能拒绝渲染。
- 格式固定为：
data:<mimetype>;base64,<base64-string> - MIME 类型写错（比如把
image/jpeg写成image/jpg）会导致图片空白，控制台通常无报错 - Base64 字符串不能换行、不能含空格或不可见字符，否则解码失败
- 字符串过长时建议用 JS 动态赋值，避免 HTML 源码臃肿难维护
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="tiny red dot">
用 JavaScript 动态设置 src
适合运行时生成或从 API 获取 Base64 数据的场景，可做校验、降级或懒加载处理。
- 先确保字符串以
data:image/xxx;base64,开头，否则直接赋值会触发 404 请求 - 可用正则快速判断：
/^data:image\/\w+;base64,/.test(base64Str) - 赋值后可监听
onload和onerror处理加载结果 - 若 Base64 来自用户上传，务必校验长度和前缀，防止 XSS（例如注入
javascript:伪协议）
const img = document.getElementById('myImg');
const base64Str = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJyZWQiLz48L3N2Zz4=';
if (/^data:image\/\w+;base64,/.test(base64Str)) {
img.src = base64Str;
} else {
img.src = '/fallback.png';
}
Base64 编码注意事项（Python / Node.js 常见坑）
不是所有“Base64 字符串”都能直接塞进 <img>。关键看是否带 data: 前缀、MIME 是否正确、是否含换行符。
立即学习“前端免费学习笔记（深入）”；
- Python 的
base64.b64encode()返回bytes，需用.decode('utf-8')转字符串，且**不自动加前缀** - Node.js 的
Buffer.toString('base64')同样只返回纯 Base64 字符串，需手动拼接data:image/png;base64, - 在线工具生成的 Base64 有时带换行（`\n`），复制进 HTML 前务必删除
- SVG 文件转 Base64 时，MIME 类型应为
image/svg+xml，不是image/svg或text/xml
最容易被忽略的是 MIME 类型与实际内容不符——比如把 PNG 文件用 JPEG 的 MIME 发出去，Chrome 可能显示，Firefox 直接静默失败。调试时打开开发者工具的 Network 面板，看图片请求是否标为 “(failed)” 或状态码为 0，再回头检查前缀和类型。
