如何在Express.js中通过URL参数提供静态图片文件？

我想实现根据用户输入的URL参数，从项目的images目录返回对应图片。比如访问https://localhost:3000/images?fileName=burger时，浏览器要显示burger.jpg。

我的项目结构如下：

images
└── burger.jpg
src
└── index.ts

我试过两种方法，但都没生效：

第一种方法：

app.use('/images', express.static('images'));

第二种方法：

if(req.query.fileName === "burger"){
      res.sendFile("burger.jpg" , {root: path.join("./images")});
}

请问该怎么实现这个需求？

解决方案 #

方法一：修正静态资源中间件的路径问题 #

express.static的路径是相对于启动Node进程的目录，而非当前代码文件（src/index.ts）的路径。如果你的启动命令是在项目根目录执行的（比如node dist/index.js），express.static('images')的路径逻辑是对的，但这种方式对应的访问URL是https://localhost:3000/images/burger.jpg，不支持fileName参数的格式。

如果要保证路径绝对可靠，建议用path.resolve结合__dirname生成绝对路径：

import path from 'path';
import express from 'express';

const app = express();
// 生成images目录的绝对路径，避免相对路径解析错误
const imagesDir = path.resolve(__dirname, '../images');
app.use('/images', express.static(imagesDir));

方法二：适配参数格式的路由实现 #

你的第二种方法存在两个核心问题：未匹配对应路由、相对路径解析不可靠，修正后的代码如下：

import path from 'path';
import express from 'express';

const app = express();

// 匹配/images的GET请求
app.get('/images', (req, res) => {
  const fileName = req.query.fileName as string;
  if (!fileName) {
    return res.status(400).send('缺少fileName参数');
  }
  // 过滤非法文件名，防止路径遍历攻击
  const safeFileName = path.basename(fileName);
  const fullImagePath = path.resolve(__dirname, '../images', `${safeFileName}.jpg`);
  
  res.sendFile(fullImagePath, (err) => {
    if (err) {
      res.status(404).send('图片不存在');
    }
  });
});

app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000');
});

现在访问https://localhost:3000/images?fileName=burger就能正确返回burger.jpg。

额外注意事项 #

• 必须添加参数校验和文件名过滤，防止恶意路径（比如fileName=../src/index）导致的安全问题
• 确保images目录存在，且Node进程拥有该目录的读取权限

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