ReactJS中如何将图片从后端发送至前端并筛选特定前缀资源

你遇到的核心问题是fs是Node.js服务端专属API，浏览器运行环境不提供，无法直接在前端读取本地目录文件列表，以下是几种可行的实现方案：

方案1：纯前端静态资源预处理（适合图片为项目打包内置的静态资源场景） #

如果你用Create React App（CRA）搭建的项目，可以使用webpack内置的require.contextAPI在构建阶段批量导入图片路径，运行时直接筛选即可：

// 批量导入public/images目录下所有png图片
const importAll = (r) => r.keys().map(r);
const allImages = importAll(require.context('../../public/images/', false, /\.png$/));

// 按关键词筛选路径
const matchedImages = allImages.filter(imgPath => imgPath.includes(keyword));

// 渲染
return (
  <div>
    {matchedImages.map((imgSrc, idx) => <img key={idx} alt="" src={imgSrc} />)}
  </div>
)

如果是Vite搭建的项目，替换为import.meta.globAPI即可，原理相同：构建阶段就把所有符合规则的静态资源路径收集完毕，运行时不需要读取目录。

方案2：静态清单文件方案（适合图片放在public目录、改动频率低的场景） #

你可以在public/images目录下新增一个manifest.json文件，提前维护好所有图片的文件名列表：

// public/images/manifest.json
["banner1.png", "banner2.png", "icon1.png", "icon2.png"]

前端直接请求这个清单文件，再筛选匹配的文件名拼路径即可：

useEffect(() => {
  fetch('/images/manifest.json')
    .then(res => res.json())
    .then(files => {
      const matched = files.filter(file => file.startsWith(keyword))
        .map(file => process.env.PUBLIC_URL + '/images/' + file)
      setPictures(matched)
    })
}, [keyword])

如果不想手动维护清单，可以写个简单的node脚本在本地打包前自动生成该文件即可。

方案3：后端协助实现（适合图片动态上传、改动频率高的场景） #

如果你的图片是业务动态生成/用户上传的，不是打包阶段固定的资源，最合适的方案就是后端提供接口做筛选：

1. 后端新增接口，接收keyword参数，服务端用fs读取图片存储目录，筛选出前缀匹配的文件路径，返回给前端数组
2. 前端调用接口拿到匹配的图片路径列表，遍历渲染<img>标签即可

后端示例（Node.js + Express）： #

const express = require('express');
const fs = require('fs/promises');
const path = require('path');
const app = express();

app.get('/api/get-matched-images', async (req, res) => {
  const { keyword } = req.query;
  const imageDir = path.join(__dirname, './public/images/');
  const allFiles = await fs.readdir(imageDir);
  const matchedPaths = allFiles
    .filter(file => file.startsWith(keyword))
    .map(file => `/images/${file}`);
  res.json(matchedPaths);
});

选型建议 #

• 静态资源固定的场景优先选方案1，无需额外开发成本
• 图片改动少、不想动后端的场景选方案2
• 图片动态新增的生产场景优先选方案3，扩展性最高

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