如何用Google-Cloud与Node.js从Firebase Storage获取图片并在网页展示

我来帮你把这个功能完整实现，分后端（Node.js/Express）和前端展示两部分来讲解：

一、完善后端路由代码 #

首先确保你已经安装了所需依赖：

npm install google-cloud express

接下来把你的/image路由补全，这里提供两种实用实现方式：

方式1：固定获取指定图片 #

假设你要获取存储桶里的profile-photo.jpg：

router.get('/image', function (req, res) {
  // 指定要获取的目标文件名
  const fileName = 'profile-photo.jpg';
  const file = bucket.file(fileName);

  // 先检查文件是否存在
  file.exists()
   .then(([exists]) => {
      if (!exists) {
        return res.status(404).send('图片不存在');
      }

      // 设置响应头（根据图片实际类型调整，比如png就用image/png）
      res.setHeader('Content-Type', 'image/jpeg');
      // 创建存储桶文件的读取流，直接pipe到响应对象
      const remoteReadStream = file.createReadStream();
      remoteReadStream.pipe(res);

      // 处理流传输中的错误
      remoteReadStream.on('error', (err) => {
        res.status(500).send('获取图片失败：' + err.message);
      });
    })
   .catch((err) => {
      res.status(500).send('检查文件状态失败：' + err.message);
    });
});

方式2：动态获取指定图片（支持前端传参） #

这种方式更灵活，前端可以通过URL参数指定要获取的图片：

router.get('/image', function (req, res) {
  const fileName = req.query.filename;
  // 先校验参数是否存在
  if (!fileName) {
    return res.status(400).send('请传入要获取的文件名参数');
  }

  const file = bucket.file(fileName);

  file.exists()
   .then(([exists]) => {
      if (!exists) {
        return res.status(404).send(`图片 ${fileName} 不存在`);
      }

      // 自动获取文件的Content-Type（推荐，无需手动判断图片类型）
      file.getMetadata()
       .then(([metadata]) => {
          res.setHeader('Content-Type', metadata.contentType);
          const remoteReadStream = file.createReadStream();
          remoteReadStream.pipe(res);

          remoteReadStream.on('error', (err) => {
            res.status(500).send('获取图片失败：' + err.message);
          });
        })
       .catch((err) => {
          res.status(500).send('获取文件元数据失败：' + err.message);
        });
    })
   .catch((err) => {
      res.status(500).send('检查文件状态失败：' + err.message);
    });
});

注意：如果你的Firebase Storage存储桶设置为私有访问，需要确保你的服务账号（keyFilename对应的账号）拥有该存储桶的storage.objects.get权限；如果是公开桶，直接用上面的代码就没问题。

二、前端展示图片 #

后端配置好后，前端只需要通过img标签直接引用这个路由的URL即可：

• 如果是固定图片：

<img src="/image" alt="我的Firebase存储图片">

• 如果是动态传文件名：

<!-- 示例：获取名为vacation.jpg的图片 -->
<img src="/image?filename=vacation.jpg" alt="旅行照片">

这样就能在网页上正常展示Firebase Storage里的图片了。

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