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

今天做项目遇到个问题  请求的图片需要加个请求头参数才行

百度一番 找到一个有点用的参考地址  https://blog.csdn.net/qq_41499782/article/details/113584518

跟我想的差不多  

大概意思就是把图片地址用axios加上请求头请求一次

下面是参考博主所记录

在做项目的时候，展示图片可能会用到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 里面就行了。

但是我 做的时候遇到个问题  

vue  往图片放处理后的地址的时候  说返回的是promise

经过处理 终于实现了效果

 async imgSrc(url) {

      let that = this;

      let urlsrc = "";  //通过一个参数 从下面接收

     

      // 通过图片地址获取图片，从新获取图片

      var config = {

        method: "get",

        responseType: "arraybuffer",

        url: url,

        headers: {

          Authorization: "Basic cXVuaW5nbmluZzE5ODU6Y2hlbmNoZW4yMDEzMTAwMw==",

        },

      };

      // 重新获取请求，获取的是base64位的图片

      await this.$axios(config).then((response) => {

     //因为从这里return老是报错

        urlsrc =

          "data:image/png;base64," +

          btoa(

            new Uint8Array(response.data).reduce(

              (data, byte) => data + String.fromCharCode(byte) + "",

              ""

            )

          );

      });

      return urlsrc;

    },

 

 

ok了 实现了  哈哈哈