Vite+Vue3项目批量引入图片的方法是借助import.meta.glob导入文件。对于一批文件名类似的文件可以很方便的导入项目提供组件使用。
项目需要使用一些图片用来表示用户的等级，等级一，等级二，等级三等等，对应的图片文件设置为了level1.png，level2.png，level3.png ...... 我们将这些文件放在/src/assets/user_level目录下：
// 使用 import.meta.glob 动态导入 user_level 文件夹中的所有图片
const levelImages = {}; //用于存储不同等级对应的图片
const levelModules = import.meta.glob('@/assets/user_level/*.png', { eager: true });
for (const path in levelModules) {
const level = path.match(/level(\d+)\.png/)[1];
levelImages[level] = levelModules[path].default;
}import.meta.glob：这是 Vite 提供的一个 API，用于批量导入符合特定模式的模块。这里的 '@/assets/user_level/*.png' 表示匹配 src/assets/user_level 目录下所有 .png 文件，并且 { eager: true } 表示立即执行导入而不是懒加载。这里把图片文件看作一个模块。
path.match(/level(\d+)\.png/)是从文件路径中提取等级数字部分，比如level1.png中的数字1。将提取出的等级作为键，对应的图片资源（通过 levelModules[path].default 获取）作为值，存入 levelImages 对象中。
那么levelImages对象大概是这样：
{
"1": "src/assets/user_pevel/level1.png",
"2": "src/assets/user_pevel/level2.png",
"3": "src/assets/user_pevel/level3.png",
...
}组件模板中使用(传递等级数值即可)：
<li class="comment" v-for="(item, index) in props.movieHotComments" :key="index"> <img :src="levelImages[item.userLevel]" :alt="item.userLevel" v-if="levelImages[item.userLevel]" /> </li>
