fetch获取图片转blob生成blob:null地址图片无法显示如何修复

你的代码存在两个核心错误，导致生成的Blob是无效数据，图片无法渲染：

• 核心错误：fetch 返回的 response 是 Response 流对象，不是直接的二进制数据，必须先调用它的 arrayBuffer() 方法解析，才能拿到真实的图片二进制内容。原代码直接把 Response 实例传入 Uint8Array 构造函数，得到的是完全错误的无效数据。
• 无效配置：你写在Request初始化参数里的 type: "arraybuffer" 是无效配置，fetch 没有这个配置项——responseType 是XMLHttpRequest的专属属性，在fetch体系中不需要提前配置响应类型，在响应处理阶段调用对应的解析方法即可。
• 补充说明：你看到src属性值前缀是 blob:null/ 不是错误，这是因为你本地打开HTML文件使用的是file://协议，页面源为null，只要Blob数据有效，这类地址依然可以正常渲染图片。

<html>
<head></head>
<body>
    <img id="photo" alt="Girl in a jacket" width="500" height="600">
</body>
<script type="text/javascript">
    const myRequest = new Request('http://localhost:8080/blue/', {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
    });

    fetch(myRequest)
        .then(response => {
            if (!response.ok) {
                throw new Error('请求失败，状态码：' + response.status);
            }
            // 核心修复：先将响应解析为ArrayBuffer二进制数据
            return response.arrayBuffer();
        })
        .then(buffer => {
            const arrayBufferView = new Uint8Array(buffer);
            const blob = new Blob([arrayBufferView], {type: "image/jpeg"});
            const urlCreator = window.URL || window.webkitURL;
            const imageUrl = urlCreator.createObjectURL(blob);
            const img = document.querySelector("#photo");
            img.src = imageUrl;
            // 最佳实践：图片加载完成后释放Blob地址，避免内存泄漏
            img.onload = () => {
                urlCreator.revokeObjectURL(imageUrl);
            }
        })
        .catch(err => {
            console.error('图片加载异常：', err);
        });
</script>
</html>

如果替换代码后依然无法显示，检查以下配置：

• 确认服务端接口http://localhost:8080/blue/已正确配置CORS响应头，返回头中包含Access-Control-Allow-Origin字段，允许当前页面的源访问，否则跨域请求会被浏览器拦截，无法拿到正确数据。
• 如果你的接口返回的不是纯二进制图片流，而是服务端模板中使用的base64格式字符串，需要把解析逻辑改为调用response.text()拿到base64内容，直接给img.src赋值`data:image/jpg;base64,${base64Str}`即可，不需要转Blob。

内容的提问来源于stack exchange，提问作者Hasan A Yousef