1、 问题： 我在vue3的一个项目，需要使用img标签获取后端的图片，但是需要在请求头添加token。尝试发现这种请求不经过axios的拦截请求，且不能以参数的方式携带token（不安全）

2、解决方法： 自定义一个组件(TokenImg.vue)

<code><script setup>

import { -- -->onBeforeMount, ref} from 'vue';

import axios from "axios";

const props = defineProps({

src: String,

token: String

});

const tempUrl = ref(null);

onBeforeMount(async () => {

const response = await axios.get('/api' + props.src, {

headers: {

Authorization: props.token,

},

responseType: "blob" //将响应直接存储为 Blob 对象

});

// 通过 axios 请求获取到的图片数据的 Blob 转换为一个临时的 URL

tempUrl.value = URL.createObjectURL(response.data);

});

</script>

<template>

<img :src="tempUrl"/>code>

</template>

3、调用组件验证正确性