img src 必须是完整 data URL，即以 data:image/ 开头并含 ;base64, 前缀，MIME 类型需准确且大小写敏感，Base64 字符串不得含空白符，后端返回纯 Base64 时前端须手动拼接，存储或传输中需避免重复编码或误用响应体。
img src 必须是完整 data URL，不能只放 Base64 字符串
浏览器看到 <img src="iVBORw0KG..."> 会当成相对路径去请求，结果 404；必须补全 data:image/png;base64, 前缀才能被识别为内联图片。
- 正确写法：
<img src="data:image/png;base64,iVBORw0KG..."> - 常见错误：漏掉
;base64,（如写成data:image/png,iVBORw...），浏览器静默失败 - MIME 类型要跟原始图一致：
image/jpeg不是image/jpg，image/PNG在旧浏览器可能不认（大小写敏感） - Base64 字符串本身不能含换行、空格或制表符——终端生成时记得用
tr -d '\n'或 PowerShell 的[Convert]::ToBase64String()
后端返回纯 Base64 数据时，前端要手动拼接 data URL
很多 API 只返回一串 Base64 字符（比如 iVBORw0KG...），没带前缀。这时候不能直接塞进 src，得自己补。
- 拼接模板：
`data:${mime};base64,${base64Str.replace(/\s/g, '')}`——replace是防后端混入空白符 - 根据文件扩展名映射 MIME：
.jpg→image/jpeg，.png→image/png，.webp→image/webp - 别信后端说的 “已返回完整 data URL”，实际响应里可能多包了一层 JSON 或带了不可见字符，建议用
console.log(JSON.stringify(res))看真实内容
从数据库读 Base64 图片，别二次 base64_encode
如果 MySQL 里存的是带 data:image/png;base64, 前缀的完整字符串（LONGTEXT 或 LONGBLOB），PHP 直接 echo 就行；如果存的是纯 Base64，才需要拼接。
- 错误操作：
base64_encode($row['Video'])—— 数据已是 Base64，再编码就废了 - 安全做法：先检查字段值是否以
data:image/开头，是就直接输出；否则按 MIME 拼接 - SQL 查询别用
*，明确写SELECT Video FROM table，避免因字段顺序变动导致取错列
fetch 加载 .txt 文件里的 Base64，要用 .text() 不是 .body
有人把 Base64 存成 icon.txt 上传到 CDN，然后 <img src="icon.txt"> —— 这样浏览器收到的是 text/plain 响应，不是图片。
立即学习“前端免费学习笔记（深入）”；
- 正确流程：用
fetch("icon.txt")→await response.text()→ 得到完整字符串 → 赋给img.src - 千万别用
response.body，它是ReadableStream，不能当 URL 用 - 可加校验：
if (!base64DataUrl.startsWith('data:image/')) throw new Error('不是有效图片 data URL')
