使用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>