核心是将响应体转为Blob后用URL.createObjectURL生成临时URL赋给img.src；需fetch时调用res.blob()获取Blob，设置img.onload时及时revokeObjectURL释放内存，且后端应返回纯二进制图片字节并配对正确Content-Type。
JavaScript 处理接口返回的图片二进制流并渲染显示，核心是把响应体转为 Blob，再用 URL.createObjectURL() 生成临时 URL 赋给 <img alt="JavaScript 怎么处理接口返回的图片二进制流并渲染显示" > 的 src。关键在于请求时设置正确的响应类型，并正确解析二进制数据。
确保接口返回的是纯二进制数据（非 base64）
后端应直接返回图片原始字节（如 Content-Type: image/png），不要做 base64 编码或 JSON 封装。前端需显式声明期望接收二进制格式：
- 使用
fetch时，设置responseType不适用（fetch用response.blob()替代） - 必须在
headers中避免干扰，一般无需额外 header；重点是调用.blob()方法解析响应体 - 若后端返回的是 JSON 包裹的 base64 字符串，需先解析 JSON，再用
atob()+Uint8Array构造 Blob —— 但这是绕路做法，不推荐
用 fetch + blob 渲染图片（推荐方式）
这是最现代、简洁的做法：
async function loadImgFromApi(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob(); // 关键：把响应体转为 Blob
const imgUrl = URL.createObjectURL(blob); // 创建临时 URL
const img = document.getElementById('myImage');
img.src = imgUrl;
img.onload = () => URL.revokeObjectURL(imgUrl); // 用完及时释放内存
} catch (err) {
console.error('加载图片失败:', err);
}
}
loadImgFromApi('/api/photo?id=123'); // 调用示例
兼容旧浏览器？用 XMLHttpRequest（可选）
如果需支持 IE10+ 或某些特殊环境，可用 XMLHttpRequest：
立即学习“Java免费学习笔记（深入）”；
- 设置
xhr.responseType = 'blob'（必须在xhr.open()之后、xhr.send()之前） - 成功后通过
xhr.response直接拿到 Blob 对象 - 后续生成 URL 和赋值逻辑与 fetch 完全一致
注意事项和常见坑
实际开发中容易忽略这些细节：
-
CORS 问题：如果图片接口跨域，后端必须设置
Access-Control-Allow-Origin，否则 fetch 会静默失败 -
内存泄漏风险：每次
createObjectURL都会保留 Blob 引用，务必在img.onload或img.onerror中调用revokeObjectURL -
响应类型识别错误：即使后端返回的是 PNG，若
Content-Type错写成text/plain，blob()仍能工作（它只认字节，不验 MIME），但影响缓存和调试，建议后端配对正确类型 -
大图加载卡顿：Blob 构建和 URL 创建是同步的，但真正解码渲染由浏览器异步完成；如需感知加载状态，监听
img.onload/onerror即可
