带token查看图片自定义组件

<template>
	<img :id="id" style="display: none;"/> //原生
	<a-image :width="width" :height="height" :src="src" /> //antdvue组件
</template>
<script lang="ts">
	import {
		useUserStore,
	} from "/@/store/modules/user";
	import {
		ref,
	} from 'vue';
	export default {
		name: "authImg",
		props: ['authSrc', 'id','widthImg','heightImg'],
		setup(props) {
			let id = props.id
			const userStore = useUserStore();
			const token = userStore.getToken;
			const headers = "Bearer " + token
			let authSrc = props.authSrc
			let width = ref('60px')
			let height = ref('60px')
			console.log(props)
			if(props.widthImg) {
				width.value = props.widthImg
			}
			if(props.heightImg) {
				height.value = props.heightImg
			}
			Object.defineProperty(Image.prototype, "authsrc", {
				writable: true,
				enumerable: true,
				configurable: true,
			});
			let request = new XMLHttpRequest();
			let src =ref('')
			request.responseType = "blob";
			request.open("get", authSrc, true);
			//这里带上请求头
			request.setRequestHeader("Authorization", headers);
			request.onreadystatechange = (e) => {
				if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
					document.getElementById(id).src = URL.createObjectURL(request.response);
					src.value = URL.createObjectURL(request.response);
					document.getElementById(id).onload = () => {
						URL.revokeObjectURL(document.getElementById(id));
					};
				}
			};
			request.send(null);
			return {
				id,
				src,
				width,
				height
			}
		}
	};
</script>