URL.createObjectURL(blob)生成图片无法显示问题及正确语法咨询

嘿，我来帮你搞定这个Blob图片显示的问题！你遇到的情况大概率是语法小错误或者Blob处理的细节没踩对，下面是几种靠谱的实现方案，一步步来：

1. 先修正基础语法错误 #

你写的<image>标签是HTML语法错误——图片标签应该是<img>（注意是img不是image），而且你的src属性引号也没闭合，这俩问题直接会导致图片无法识别！先把标签写对：

<img src="blob:http://localhost/someblobhash" alt="Blob图片">

2. 完整的JavaScript实现流程 #

通常我们会通过异步请求获取Blob，再生成URL绑定到<img>标签，这里给你两个常用场景的完整示例：

示例1：从Fetch API获取Blob并显示 #

// 假设你通过接口获取图片Blob
fetch('你的图片接口地址')
  .then(response => {
    // 先校验响应状态，确保请求成功
    if (!response.ok) throw new Error('图片请求失败');
    // 将响应转为Blob对象
    return response.blob();
  })
  .then(blob => {
    // 生成Blob URL
    const blobUrl = URL.createObjectURL(blob);
    // 获取页面已有的img元素，或者动态创建
    const img = document.getElementById('target-img');
    // 动态创建img的写法：const img = document.createElement('img');
    
    img.src = blobUrl;
    img.alt = '加载的Blob图片';
    
    // 关键：图片加载完成后释放Blob URL，避免内存泄漏
    img.onload = () => {
      URL.revokeObjectURL(blobUrl);
    };
    
    // 如果是动态创建的img，记得添加到DOM中
    // document.body.appendChild(img);
  })
  .catch(error => console.error('加载图片出错:', error));

示例2：手动构造Blob（比如从二进制/Base64转来） #

如果你是自己构造Blob，一定要指定正确的MIME类型，否则浏览器无法识别为图片：

// 假设你有图片的二进制数据（比如从Base64转成的Uint8Array）
const imageBuffer = new Uint8Array([/* 你的图片二进制数据 */]);
// 这里的type必须匹配图片实际格式：image/png、image/jpeg等
const blob = new Blob([imageBuffer], { type: 'image/png' });

const blobUrl = URL.createObjectURL(blob);
const img = document.createElement('img');

img.src = blobUrl;
img.onload = () => URL.revokeObjectURL(blobUrl);
document.body.appendChild(img);

3. 常见问题排查清单 #

• MIME类型不匹配：如果Blob的type设错（比如写成text/plain），浏览器会无法识别为图片，直接不渲染。
• Blob URL提前释放：如果在图片加载完成前就调用URL.revokeObjectURL，URL会失效导致图片显示失败。
• CORS限制：跨域获取Blob时，要确保服务器设置了正确的CORS响应头，否则请求会失败拿不到Blob。
• 标签拼写错误：再次确认是<img>不是<image>，所有属性的引号要正确闭合。

内容的提问来源于stack exchange，提问作者kulls