image组件

<template>
  <div>
    <img :src="imageDataUri" :alt="props.alt" />
  </div>
</template>
<script lang="ts">
defineOptions({ name: "SImage" });
</script>
<script lang="ts" setup>
import axios from "axios";
import { ref, onMounted, defineOptions, withDefaults, defineProps } from "vue";

type Props = {
  alt?: string;
  signid?: number | string; // 文件id
};
const props = withDefaults(defineProps<Props>(), {
  alt: "图片未获取到",
});

const imageDataUri = ref("");

const userStore = useUserStore();
const fetchImage = async (id?: number | string) => {
  try {
    const response = await axios.get(
     '你的接口路径'+id, // 看情况
      {
        responseType: "arraybuffer",
        headers: {
          Authorization: `Bearer 你的token`,
        },
      },
    );

    const blob = new Blob([response.data], { type: "image/jpeg" });
    const url = URL.createObjectURL(blob);
    imageDataUri.value = url;
  } catch (error) {
    console.error("Error fetching image:", error);
  }
};

onMounted(() => {
  fetchImage(props.signid);
});
</script>

<style scoped lang="less">
div {
  text-align: center;
  img {
    box-sizing: border-box;
    height: 47px;
  }
}
</style>