vue3+vite批量引入图片文件

vue3支持批量引入某个文件夹下的所有资源,不用通过 import XXX from '/路径'的这种方式去一张张引入

// eager:true 表示静态资源
// '/public/imgs'路径下

let imageList = import.meta.glob('/public/imgs/*.*',{eager:true})


console.log(Object.values(imageList).map(v=>v.default))

打印示例:

vue3+vite批量引入图片文件_第1张图片

注:不是vite构建的项目是不支持的,import.meta.glob也可以用于引入其他资源。

// 两种引入方式 懒加载 和静态引入
import.meta.glob相当于这种引入方式: () => import('./dir/ceshi.js')

import.meta.globEager //目前是被废弃了
// 以下为替换写法
import.meta.glob('/public/imgs/*.*',{eager:true})

你可能感兴趣的:(vue.js,typescript,elementui)