vue axios从服务器加载图片并显示


使用场景: 后台传给前端一个图片二进制流,但是要添加httpp header,但是在传统的用img标签查看图片,无法添加http header

    this.$axios({
           method: 'get',
           url: "img url" ,
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
             "token": this.token  // 必须添加的请求头
           },
           responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
         }).then(function (response) {  // 将后台的图片二进制流传华为base64
           return 'data:image/png;base64,' + btoa(
             new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
           );
         }).then(data=>{
           _this.imgUrl=data; // data即为图片地址
          });

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM