鍍金池/ 問答/HTML/ axios怎么請求圖片服務器上的圖片并顯示到img上？

axios怎么請求圖片服務器上的圖片并顯示到img上？

1.前后端分離項目，前端vue+webpackage+axios，后端springboot
2.使用了zuul做網(wǎng)關并配置路由，身份認證通過在header中寫入token，在網(wǎng)關入口進行認證
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,"

clipboard.png

clipboard.png

回答
編輯回答
鐧簞噯

https://www.opinionatedgeek.c...
在這里檢驗一下base64是否有效

2018年2月21日 00:11
編輯回答
膽怯

前后端分離了 然后呢

2018年3月9日 04:16
編輯回答
乖乖噠
 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;
      });
2018年3月2日 09:10