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

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

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


20210203094608848.png


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


20210203095334334.png


解决方法


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


postman 请求源码


20210203095941207.png

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 里面就行了。

相关文章
|
3天前
|
JavaScript 前端开发
在Vue中,如何使用异步组件?
在Vue中,如何使用异步组件?
9 1
|
2天前
|
JavaScript 前端开发
在Vue中,如何更新元素的样式?
在Vue中,如何更新元素的样式?
5 0
|
2天前
|
JavaScript
Vue中如何自定义指令?
Vue中如何自定义指令?
6 1
|
2天前
|
JavaScript
在Vue中,还有哪些指令可以用于动态显示DOM元素?
在Vue中,还有哪些指令可以用于动态显示DOM元素?
6 1
|
2天前
|
JavaScript
Vue中的v-if和v-show在性能上有何区别?
Vue中的v-if和v-show在性能上有何区别?
6 1
|
3天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
3天前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
3天前
|
JavaScript
vue 页面刷新、重置、更新页面所有数据
vue 页面刷新、重置、更新页面所有数据
|
3天前
|
JavaScript
在Vue中,如何使用`$once`侦听一个事件?
在Vue中,如何使用`$once`侦听一个事件?
8 1
|
3天前
|
存储 JavaScript 前端开发
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
9 2