React项目如何遍历public/assets/images获取所有图片文件名存入数组

浏览器端运行的JavaScript无法直接读取服务器/本地目录结构，所以需要通过构建工具能力或者预生成列表的方式实现需求，以下是两种常用可行方案：

方案1：使用构建工具批量导入能力（开发效率最高） #

推荐将public/assets/images下的所有图片移动到src/assets/images目录，利用构建工具自带的批量导入能力直接获取所有图片资源路径：

适配Webpack/Create React App项目 #

const ImageList = () => {
  // 匹配src/assets/images下所有png、jpg、webp格式的图片
  const imgContext = require.context('../assets/images', false, /\.(png|jpe?g|webp)$/)
  const filenames = imgContext.keys().map(key => imgContext(key))

  return (
    <ul>
      {filenames.map((imgSrc, index) => (
        <li key={index}>
          <img src={imgSrc} alt={`图片${index+1}`} />
        </li>
      ))}
    </ul>
  )
}

export default ImageList

适配Vite项目 #

const ImageList = () => {
  // 批量导入src/assets/images下所有目标格式图片
  const imgModules = import.meta.glob('/src/assets/images/*.{png,jpg,jpeg,webp}', { eager: true })
  const filenames = Object.values(imgModules).map(mod => mod.default)

  return (
    <ul>
      {filenames.map((imgSrc, index) => (
        <li key={index}>
          <img src={imgSrc} alt={`图片${index+1}`} />
        </li>
      ))}
    </ul>
  )
}

export default ImageList

方案2：预生成文件名列表（无需改动原有public目录结构） #

如果要保留图片放在public目录的结构，可以写一个Node脚本在项目启动/构建前自动生成图片文件名数组：

1. 项目根目录新建gen-img-list.js脚本文件：

const fs = require('fs')
const path = require('path')

// 定位public下的图片目录
const imgDir = path.join(__dirname, 'public/assets/images')
// 过滤出目标格式的图片
const files = fs.readdirSync(imgDir).filter(file => /\.(png|jpe?g|webp)$/.test(file))
// 生成可直接导入的配置文件
const output = `export const imgFilenames = ${JSON.stringify(files.map(file => `/assets/images/${file}`))}`
fs.writeFileSync(path.join(__dirname, 'src/constants/imgList.js'), output)

2. 修改package.json的启动、构建命令，每次运行前自动执行脚本：

"scripts": {
  "start": "node gen-img-list.js && react-scripts start",
  "build": "node gen-img-list.js && react-scripts build"
}

3. 组件内直接导入生成好的配置即可：

import { imgFilenames } from '../constants/imgList'

const ImageList = () => {
  return (
    <ul>
      {imgFilenames.map((imgSrc, index) => (
        <li key={index}>
          <img src={imgSrc} alt={`图片${index+1}`} />
        </li>
      ))}
    </ul>
  )
}

export default ImageList

内容的提问来源于stack exchange，提问作者azhar dif a