JavaScript中如何高效批量导入文件夹图片生成图片数组？

根据你的场景不同，有两类可落地的实现方案，都不需要手动维护图片路径数组：

场景1：使用Vite/Webpack等前端构建工具的项目 #

这是最简便的实现方式，直接调用构建工具提供的批量导入API即可，后续新增图片只要放入myImage文件夹，会自动被识别加入数组，无需修改代码：

• Vite项目写法：

// 匹配myImage下所有.png格式文件，eager设为true表示直接加载所有资源
const imageModules = import.meta.glob('/myImage/*.png', { eager: true })
// 提取资源路径生成数组
const URLs = Object.values(imageModules).map(module => module.default)

• Webpack项目写法：

// 三个参数分别为：扫描路径、是否扫描子目录、文件匹配规则
const imageContext = require.context('/myImage', false, /\.png$/)
const URLs = imageContext.keys().map(key => imageContext(key))

场景2：无构建工具的纯静态页面场景 #

浏览器出于安全限制，禁止前端JS直接扫描服务器/本地的文件夹结构，所以需要配合额外的预处理步骤：

• 方案A：后端新增一个接口，返回myImage文件夹下所有图片的路径数组，前端发请求获取即可
• 方案B：本地写个简单的node脚本，每次新增图片后运行一次，自动生成image-list.json文件存放所有路径数组，前端直接请求该文件：

// 前端请求路径清单文件
fetch('/myImage/image-list.json')
  .then(res => res.json())
  .then(urlList => {
    const URLs = urlList
    // 后续业务逻辑
  })

额外优化提示 #

你当前手动写的URLs数组存在重复路径，如果有去重需求，拿到路径数组后执行URLs = [...new Set(URLs)]即可快速去重。

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