img向后端获取图片时怎么解决需携带token的问题

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

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

<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"/></template>

3、调用组件验证正确性

import TokenImg from"@/components/TokenImg.vue";<TokenImg :src="userInfo.info.avatar":token="userInfo.info.token" style="width: 40px;height=40px;"/>