Nuxt3+Vite批量引入图片

通过计算属性获取images文件夹所有层级下所有静态资源

<script name="MarketplaceHeader" setup lang="ts">
//批量导入静态资源图片
const importImage: any = computed(() => (name: string, type = 'png', folder = 'images') => {const glob: Record<string, any> = import.meta.glob(`~/assets/images/**/*`, {eager: true,});// console.log("🚀 ~ file: MarketplaceHeader.vue:32 ~ constimportImage ~ glob:", glob)return glob[`/assets/${folder}/${name}.${type}`]["default"];
})
</script>

获取images文件夹下的静态资源（不包括images文件夹下其它文件夹里的静态资源）

<script name="MarketplaceHeader" setup lang="ts">
//批量导入静态资源图片
const importImage: any = computed(() => (name: string, type = 'png', folder = 'images') => {const glob: Record<string, any> = import.meta.glob(`~/assets/images/*`, {eager: true,});// console.log("🚀 ~ file: MarketplaceHeader.vue:32 ~ constimportImage ~ glob:", glob)return glob[`/assets/${folder}/${name}.${type}`]["default"];
})
</script>

模板使用

<el-image :src="importImage('logo')" fit="scale-down"></el-image>

<el-image :src="importImage('footer-logo','jpg','images/footer-auth')" fit="scale-down"></el-image>