关于前端显示 blob 图像的问题

[AerithLoveMe]

我目前是通过后端返回图片字节流，前端接收的是字符串，当我把字符串转 blob 并转换为图像展示的时候出错了，一直显示不出来，blob url 例如：blob:http://127.0.0.1:5500/27903d9a-863c-4170-b4c6-8bd1f335b136，字节流例如：'�PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x07�\x00\x00\x04�\b\x03\x00\x00\x00�V$�\x00\x00\x03\x00PLTE\r'，blob 打开的链接也都是乱码，请问我哪一步出错了？

[AerithLoveMe]

https://z3.ax1x.com/2021/09/09/hONK81.png

[randyo]

blob 的 type 是不是应该用图片的

[shakaraka]

图片你用 text/plain ？？？

[seki]

object url 是用来下载的
img src 要用 bas64 的 data: 协议

[autoxbc]

如果不给 axios 设置 responseType，那么 res.data 的类型是 string，这里是文本化的字节流，也就是乱码，后续怎么处理都不能用

给 axios.post 传递第三个参数 { responseType: 'blob' }，这样返回值是 Blob 对象，不需要再手动构造
axios.post('http://localhost:9080/compress/png', formData , { responseType: 'blob' } )
.then( res => {
const blob = res.data ;
const url = URL.createObjectURL(blob);
......
} );

以及，如果因为某种操作，返回了符合 new Blob 构造的输入值，type 参数也应该是 image/png，而不是 text/plain

[AerithLoveMe]

@autoxbc 谢谢。成功了！

[Quarter]

mime type 不能随便设置

[Gaays]

@autoxbc 你好我这里也遇到这个问题了，我按照你的方法设置但是不起效果，报错 TypeError: Failed to execute 'createObjectURL' on 'URL'，按照网上说的都试过，但是还是无法解决，请问方便回答一下怎么处理吗，谢谢

[autoxbc]

@Gaays #8 错误信息说 URL 上没有 createObjectURL 方法，可能是
1. 浏览器过旧，没有 URL 对象，是 IE11?
2. 拼写错误，检查一下代码
3. 某些上游代码修改了 URL 对象

可以看看直接在控制台输入 URL.createObjectURL 并回车，正常情况应该返回一个函数

[Gaays]

@autoxbc 不好意思，问问题没有描述清除，感谢第 3 项的提醒，我今天把可能造成影响的代码全过了一边，发现是 mockjs 的锅😂