如何在vuejs中使用axios显示带token的图像

npm install axios

import axios from 'axios';

methods: {
  loadImage() {
    const url = 'http://example.com/image';  // 图像的URL
    const token = 'your_token';  // 这里替换成你的token

    axios.get(url, {
      headers: {
        Authorization: `Bearer ${token}`  // 设置请求头中的Authorization字段为token
      },
      responseType: 'arraybuffer'  // 设置响应类型为arraybuffer，用于处理图像数据
    })
    .then(response => {
      const blob = new Blob([response.data], { type: 'image/jpeg' });  // 创建Blob对象，用于存储图像数据
      const imageUrl = URL.createObjectURL(blob);  // 通过URL.createObjectURL方法生成图像的URL

      // 将imageUrl赋值给Vue组件的data属性或其他需要的地方，用于在模板中显示图像
      this.imageUrl = imageUrl;
    })
    .catch(error => {
      console.error(error);
    });
  }
}

<template>
  <div>
    <img :src="imageUrl" alt="图像">
  </div>
</template>