vue3 组件内使用路径

使用vite打包时不能将组件的路径进行编译。通过modules解决

<template>
  <div class="t-img" v-bind="attr">
    <img :src="src?.default" alt="" />
  </div>
</template>

<script lang="ts" setup>
import {
    
     defineProps, useAttrs,  ref, onMounted } from "vue";
import type {
    
     PropType } from "vue";
const props = defineProps({
    
    
  src: {
    
    
    type: String as PropType<string>,
    require: true,
    default: "",
  },
});
const modules = import.meta.glob("/src/assets/img/*.png");
const src = ref<any>();
onMounted(async () => {
    
    
  src.value = await modules[props.src]();
});
const attr = useAttrs();
</script>

<style lang="scss" scoped>
.t-img {
    
    
  position: relative;
  img {
    
    
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>