axios怎么请求图片服务器上的图片并显示到img上？

Question

1.前后端分离项目，前端vue+webpackage+axios，后端springboot
2.使用了zuul做网关并配置路由，身份认证通过在header中写入token，在网关入口进行认证
2.使用fastDFS做文件服务器并配置了nginx进行在线预览
3.fastDFS的在线预览地址不对外开放，通过zuul路由过去。这就要求得有token，因此直接将图片地址写到img的src属性上是行不通了，

相关代码

<img ref="img">

    getimg(){
      axios.get(process.env.BASE_API+"preview/group0/M00/00/00/rBQAHVtkLACAR2y9AAgEf2GW0sY139.png", {
        responseType: 'arraybuffer',
        headers:{"validtoken":this.$store.getters.token}
      }).then(response => {
        return 'data:image/png;base64,' +btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
      }).then(data=>{
        that.$refs.img.src=data;
      });

可以看到图片是请求下来了，但是怎么显示到img上去呢？上面这个代码是参考https://segmentfault.com/q/10... 这个上面的回答写的，但是没显示出来，console.log输出最后的data只有前面那一小段"data:image/png;base64,"

Answer 1

axios.get('图片 URL', { responseType: 'blob', })
console.log(URL.createObjectURL(res.data))

Answer 2

this.$http.get('get_img_url',{ responseType: 'blob'}).then((res)=>{
    let reader = new FileReader()
    reader.onload = (e) => {
        this.imgSrc = e.target.result;
    }
    reader.readAsDataURL(res.data)
}).catch((err)=>{

});

Answer 3

https://www.opinionatedgeek.c...
在这里检验一下base64是否有效

Answer 4

前后端分离了 然后呢

Answer 5

 getimg(){
      axios.get(process.env.BASE_API+"preview/group0/M00/00/00/rBQAHVtkLACAR2y9AAgEf2GW0sY139.png", {
        responseType: 'arraybuffer',
        headers:{"validtoken":this.$store.getters.token}
      }).then(response => {
        return  window.URL.createObjectURL(new Blob(response));
      }).then(data=>{
        that.$refs.img.src=data;
      });

Answer 6

这个问题怎么解决的？