---
title: Vite+Vue3项目批量引入图片的方法
description: Vite+Vue3项目批量引入图片的方法是借助import.meta.glob导入文件。对于一批文件名类似的文件可以很方便的导入项目提供组件使用。
author: chaihongjun
category: frontend
published: 2025-01-22
url: https://chaihongjun.me/frontend/43.html
---

# Vite+Vue3项目批量引入图片的方法

Vite+Vue3项目批量引入图片的方法是借助import.meta.glob导入文件。对于一批文件名类似的文件可以很方便的导入项目提供组件使用。

项目需要使用一些图片用来表示用户的等级，等级一，等级二，等级三等等，对应的图片文件设置为了level1.png，level2.png，level3.png ...... 我们将这些文件放在/src/assets/user_level目录下：
MDBLOCK0
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对象大概是这样：
MDBLOCK1

组件模板中使用(传递等级数值即可)：
MDBLOCK2

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/43.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。