如何在Node.js中结合流式响应图片渲染EJS视图？

你需要拆分路由职责：一个路由专门返回图片流，另一个路由渲染包含静态内容和图片引用的EJS页面。具体实现如下：

1. 拆分路由配置（Express示例） #

// 路由1：专门返回GridFS中的图片流
app.get('/images/:name', async (req, res) => {
  try {
    const fileName = req.params.name;
    // 建议在项目启动时完成MongoDB连接，避免每次请求重复连接
    const database = mongoClient.db(dbConfig.database);
    const bucket = new GridFsBucket(database, {
      bucketName: dbConfig.imgBucket
    });

    const downloadStream = bucket.openDownloadStreamByName(fileName);
    // 从GridFS文件元数据中获取正确的Content-Type，适配不同图片格式
    downloadStream.on('file', (file) => {
      res.set('Content-Type', file.contentType || 'image/jpeg');
    });

    // 处理图片不存在的情况
    downloadStream.on('error', () => {
      res.status(404).render('error', { error: '目标图片不存在' });
    });

    downloadStream.pipe(res);
  } catch (err) {
    res.status(500).render('error', { error: err });
  }
});

// 路由2：渲染包含图片和静态内容的EJS页面
app.get('/view-image/:name', async (req, res) => {
  try {
    const fileName = req.params.name;
    const database = mongoClient.db(dbConfig.database);
    const bucket = new GridFsBucket(database, { bucketName: dbConfig.imgBucket });

    // 提前验证图片是否存在，避免渲染页面后图片加载失败
    const existFile = await bucket.find({ filename: fileName }).toArray();
    if (!existFile.length) {
      return res.status(404).render('error', { error: '目标图片不存在' });
    }

    // 渲染EJS页面，传入文件名供img标签调用
    res.render('image', { fileName });
  } catch (err) {
    res.status(500).render('error', { error: err });
  }
});

2. EJS模板（views/image.ejs） #

在模板中添加静态内容，并通过img标签引用图片流路由：

<!DOCTYPE html>
<html>
<head>
  <title>图片展示页</title>
  <style>
    .page-container {
      max-width: 900px;
      margin: 30px auto;
      padding: 20px;
      font-family: sans-serif;
    }
    .static-content {
      margin-bottom: 20px;
      line-height: 1.6;
    }
    .display-image {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <h1>自定义图片展示页面</h1>
    <div class="static-content">
      <p>这里是页面的静态文本内容，你可以添加说明文字、按钮或其他任意HTML元素</p>
      <p>下方是从GridFS流式加载的图片：</p>
    </div>
    <!-- 引用图片流路由，实现流式加载 -->
    <img src="/images/<%= fileName %>" class="display-image" alt="展示图片">
    <div class="static-content">
      <p>这是图片下方的静态内容，可根据需求自由修改</p>
    </div>
  </div>
</body>
</html>

关键说明 #

• 直接将图片流pipe到响应时，浏览器会识别为图片类型并直接展示；而渲染HTML页面需要先返回HTML内容，再通过img标签发起单独请求加载图片流，这样就能同时展示静态内容和流式图片。
• 建议在项目启动时完成MongoDB连接初始化，避免每次请求重复建立连接，提升性能。

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