可用 URL.createObjectURL(blob) 直接显示内存中的二进制图片：先用正确 type（如 "image/jpeg"）将 ArrayBuffer 构造为 Blob，再生成临时 URL 赋给 img.src；用完须调用 URL.revokeObjectURL 避免内存泄漏。
直接用 data: URL 显示二进制图片（不发请求）
只要图片数据已存在内存里（比如从 fetch 拿到的 ArrayBuffer 或 Blob），就能绕过服务器、不走 HTTP 请求，直接渲染。关键不是“怎么读二进制”，而是“怎么转成浏览器认的 URL 格式”。
-
URL.createObjectURL(blob)是最常用也最安全的做法：传入Blob或File，返回一个临时的本地 URL - 别手拼
data:image/png;base64,...—— 对大图来说 base64 编码后体积涨 33%，且主线程编码会卡顿 - 用完记得调用
URL.revokeObjectURL(url)，否则内存泄漏（尤其在列表里反复创建图片时）
从 ArrayBuffer 构造 Blob 再显示
很多底层 API（如 fetch().arrayBuffer()、WebAssembly 输出、解密后的数据）给的是原始字节，必须包装成 Blob 才能被 URL.createObjectURL 接收。
- 构造
Blob时必须指定正确的type（如"image/jpeg"），否则 Chrome 可能拒绝渲染，Safari 更严格 - 不要用
new Uint8Array(buffer)直接当参数——Blob构造函数要的是buffer本身或[buffer]，不是视图 - 示例：
const blob = new Blob([arrayBuffer], { type: "image/webp" });<br>const url = URL.createObjectURL(blob);<br>img.src = url;
常见错误：图片加载失败但控制台没报错
这种静默失败往往是因为 MIME 类型错、二进制损坏，或跨域限制误触发（即使没发网络请求）。
- 检查
img.naturalWidth和img.naturalHeight：若为0，说明解析失败，不是加载中 - 把生成的
url粘贴到地址栏看是否能打开——如果打不开，问题出在Blob构造环节，不是img.src赋值问题 - 某些格式（如 HEIC、AVIF）在旧版浏览器里即使
type正确，也会静默失败；建议 fallback 到png或加img.onerror日志
性能与兼容性底线
所有现代浏览器都支持 URL.createObjectURL，但行为有细微差别：
立即学习“前端免费学习笔记（深入）”；
- Firefox 对超大
Blob（>500MB）可能拒绝创建 URL，Chrome 相对宽松 - 在 Web Worker 里不能用
URL.createObjectURL（它依赖 DOM 环境），得把二进制传回主线程再处理 - 如果图片要反复复用（比如图标库），不如一次性转成 base64 存常量里——避免频繁创建/释放 object URL 的开销
revoke，都会让图片看起来“消失了”。 
