vue img 图片需要自定义请求头

在做项目的时候，展示图片可能会用到nginx 的代理来进行展示，然而有些运维小哥哥喜欢展示技术，在展示图片的时候还需要前提传一个请求头，也就是账号和密码。在postman展示的情况如下：

如果不使用这种方式，页面直接展示401没有权限。

解决方法

运维小哥哥一回头，搞得菜鸡的我就加班搞这个玩意，最后总结解决方法如下：

postman 请求源码

img标签请求携带请求头

我们现在跨域思考一下，img标签是没有可以自定义请求头的。网上说的那些，个人感觉都不行，一个爬一个。
我的解决办法

分析： img src 是会自动发送请求的，所以我们可以认为src 里面的就是一个接口，只是该接口返回的是图片流数据，那么我们就可以在拿到图片地址的时候再来一次axios请求,在本次请求中加入请求头。

代码如下：

/**
 * 获取base64位的图片
 * @param fileName {String} 文件名称
 * @param caseId {String} 赔案号
 * @returns {Promise<string>}
 */
export async function getImgURLOfBase64(fileName, caseId) {
  // 这里获取图片的地址，如果知道地址，直接绕过这部
  const res = await getImgUrl({
   // ...获取图片地址的参数
  })
  if (!res.data || res.data.length === 0) return '';
  // 通过图片地址获取图片，从新获取图片
  var config = {
    method: 'get',
    responseType: 'arraybuffer',
    url: '对应地址',
    headers: {
     // postman 中的请求头
    }
  };
  // 重新获取请求，获取的是base64位的图片
  return await axios(config).then(response => {
    return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
  })


}

把上面获取的base位的图片地址放在对应img src 里面就行了。