Vite+React从Public目录动态导入图片失败，求排查原因

你的代码存在两个核心问题导致无法正常工作：

1. 路径匹配逻辑错误 #

import.meta.glob("/Images/*.jpg")的写法不成立：

• public目录下的资源属于静态资源，不会被Vite的模块打包机制处理，import.meta.glob只能用来匹配源码目录（比如src）内的文件，所以它根本找不到public/Images下的图片。
• 如果一定要用import.meta.glob，需要把Images文件夹移到src目录下，然后用相对路径匹配（比如../Images/*.jpg，具体路径根据当前文件位置调整）。

2. 异步操作未做同步处理 #

你在循环里调用的modules[path]().then(...)是异步任务，但imagePaths是同步声明的数组。当你后续想使用imagePaths时，then里的代码还没执行，数组还是空的。

对应修复代码 #

情况1：图片保留在public目录 #

public下的图片不需要导入，直接用静态访问路径即可。如果需要批量生成路径，可以手动维护文件名列表：

// 替换成你public/Images下的实际文件名
const imageNames = ["photo1.jpg", "banner.jpg", "avatar.jpg"];
const imagePaths = imageNames.map(name => ({
  path: `/Images/${name}`
}));
// 直接使用imagePaths即可

情况2：图片移到src目录（用import.meta.glob） #

把Images文件夹放到src下，用相对路径匹配，同时处理异步：

const modules = import.meta.glob("../Images/*.jpg");
const imagePaths = [];

// 用async/await处理异步加载
async function loadImagePaths() {
  for (const [path, loadModule] of Object.entries(modules)) {
    await loadModule();
    const url = new URL(path, import.meta.url);
    imagePaths.push({ path: url.pathname });
  }
  // 在这里使用填充好的imagePaths
  console.log(imagePaths);
}

loadImagePaths();

或者用Promise.all批量处理：

const modules = import.meta.glob("../Images/*.jpg");

Promise.all(
  Object.entries(modules).map(async ([path, loadModule]) => {
    await loadModule();
    const url = new URL(path, import.meta.url);
    return { path: url.pathname };
  })
).then(imagePaths => {
  // 这里拿到所有图片路径
  console.log(imagePaths);
});

内容的提问来源于stack exchange，提问作者Bigboss01