带上token请求图片

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

//父组件使用
 <AuthImg :authSrc="图片链接"></AuthImg>