如何将图片字符串数据转为Blob？客户端图片显示异常排查

问题原因 #

• 前端默认将后端返回的二进制图片数据解析为字符串，破坏了原始字节结构，导致生成的Blob对象无效，无法正常渲染图片。
• 后端返回的图片数据本身是正确的（Network Preview能正常显示可证明），但前端的响应解析方式错误。

解决方案 #

修改前端HTTP请求，指定响应类型为blob或arraybuffer，直接处理原始二进制数据：

方案1：直接获取Blob对象（推荐） #

public async getMedia(id: number | undefined): Promise<Blob | undefined> {
    if(!id || id === 0) { return undefined }
    // 关键：设置responseType为'blob'，让HttpClient直接返回Blob
    const blob = await this.httpClient.get(
        `/api/advertisements/image/${id}`,
        { responseType: 'blob' } as const
    );

    const url = window.URL.createObjectURL(blob);
    console.log(url);
    return blob;
}

方案2：通过ArrayBuffer转换为Blob #

如果需要手动处理字节数据，可以用这种方式：

public async getMedia(id: number | undefined): Promise<Blob | undefined> {
    if(!id || id === 0) { return undefined }
    const response = await this.httpClient.get(
        `/api/advertisements/image/${id}`,
        { responseType: 'arraybuffer', observe: 'response' } as const
    );

    const contentType = response.headers.get('content-type') || 'image/pjpeg';
    const blob = new Blob([response.body], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    console.log(url);
    return blob;
}

补充说明 #

• 后端设置的Content-Disposition: attachment会触发浏览器的下载提示，如果需要在页面内直接显示图片，可以考虑改为Content-Disposition: inline，但这不是当前问题的核心原因。
• 你之前用input上传图片时能正常显示，是因为File本身就是正确的Blob类型，没有经过字符串解析的破坏。

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