Vue携带Header的图片加载解决方案

Vue携带Header的图片加载解决方案

当访问url需要带有权限才可以访问时(如需携带token),可以先使用axios下载下来,然后通过URL.createObjectURL()转化为url赋值给img

async getBarcode(row) {
      const { data: result } = await this.$axio.get(
        "book/barcode?id="+row.id,
        {
            //设定接收类型为blob,头部什么的自行添加
          responseType:'blob',
        }
      );
    //赋值给变量
      this.barcodeUrl=URL.createObjectURL(result);
      this.barcodeDialogVisible=true;
    },

 <el-image style="width: 200px; height: 100px" :src="barcodeUrl" placeholder="Barcode"></el-image>