api返回图片如何在界面中显示

故障背景

在工作中需要一个验证码功能，后台接口给我返回的是一个文件流的形式，在控制台中查看是一连串的乱码

故障排除思路

第一步 当然是先在别人身上找原因啦，首先排除接口问题

在这里我问后端小伙伴，后端小伙伴用postman测试是好的，但是在浏览器的控制台显示却是乱码，所以是前端的故障

第二步 查资料文件流如何转成img

查询之后得知使用这行代码就能把文件流变成base64编码格式

const resB = await getCaptchaUrl(this.captchaId);
this.captchaUrl = 'data:image/png;base64,' + btoa(new Uint8Array(resB).reduce((data, byte) => data + String.fromCharCode(byte), ''))

但是在页面中显示不出来于是又百度，发现是因为用的axios，他会把所有的字符串当作json格式并转码，所以显示不出来，然后我就自己封装了一个请求头

export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`,
    responseType:'arraybuffer' // 只要加上这行代码就行了
  });
};

在将 captchaUrl 绑定到img src属性中

页面效果