js二进制数据转图片

前言

前端上传图片，传到后端，然后后端直接把图片以image形式存入数据库，待前端请求时，再从数据库中取出，传给前端，逻辑上好像没什么问题，但是在实际操作过程中，前端获取到数据后并不能直接使用<img src=res.data/>来显示图片

解决办法

1. 在请求中，修改参数responseType:"arraybuffer"
   例如：
   a. 使用axios进行修改，axios.get('http://xxxx.xxxx.xxx',{responseType:"arraybuffer"})
   b. 使用xhr进行修改，xhr.responseType = 'arraybuffer'
2. 修改返回值
   const blob = new Blob([responseData], { type: imageType })
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
3. 引用
   <img src={imageUrl}>

后续

最近又遇到了这个需求，使用上述方法，却不行，但是相同的代码，在另一个项目中却没有问题、这可快气死我了，找问题找了好长时间。。。最后，终于发现，这个项目的框架使用了Mock拦截请求，其他方面没问题，唯独二进制这块Mock貌似当时
没有考虑到这种情况。网上搜“mock 二进制”，发现其他老哥也遇到过、（汗

解决

项目中Mock相关的全部注释掉。

参考

JavaScript如何转换二进制数据显示成图片
Axios中文说明