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