答案是可行的：用 fetch 获取图片后调用 response.blob() 得到 Blob 对象，再用 URL.createObjectURL() 生成临时 URL 赋给 img.src 即可展示；需确保 CORS 正确、响应为 image/ 类型，并及时调用 revokeObjectURL 释放内存。
用 fetch 获取图片后调用 response.blob()，再用 URL.createObjectURL() 生成本地可访问的 URL，就能在页面中直接展示。
1. 发起 fetch 请求并获取 blob 数据
图片资源（如 PNG、JPEG）响应体默认是二进制流，需显式调用 blob() 方法解析为 Blob 对象：
- 确保请求地址正确且服务端允许跨域（CORS），否则会触发网络错误或拒绝读取
-
response.blob()返回 Promise，需用await或.then()处理 - 注意：不能同时调用
response.json()和response.blob()，因为响应体只能被读取一次
2. 将 Blob 转为本地 URL 并赋值给 img 元素
生成的 URL 是临时引用，指向内存中的 Blob 数据，仅当前页面有效：
- 使用
URL.createObjectURL(blob)得到类似blob:http://localhost/xxx的地址 - 将该 URL 赋给
<img src="...">即可渲染图片 - 记得在不再需要时调用
URL.revokeObjectURL(url)释放内存（尤其在频繁加载图片时）
3. 完整示例代码
以下是一个可直接运行的片段：
立即学习“Java免费学习笔记（深入）”；
async function loadAndShowImage() {
try {
const response = await fetch('https://example.com/photo.jpg');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);
const img = document.getElementById('myImage');
img.src = imageUrl;
// 可选：卸载时清理（例如切换图片前）
// URL.revokeObjectURL(imageUrl);
} catch (err) {
console.error('加载图片失败:', err);
}
}
4. 常见问题提醒
实际使用中容易踩坑的地方：
- 图片路径 404 或返回 HTML 页面（比如登录跳转），会导致
blob()成功但后续渲染失败——建议检查response.headers.get('content-type')是否包含image/ - 某些 CDN 或代理可能默认不支持 CORS，需服务端设置
Access-Control-Allow-Origin - 移动端 Safari 对大 Blob 的 URL 创建有延迟，可配合
img.onload确保渲染时机
