Question

我使用GridFS在Mongo中存储了一个小的.png文件。我想使用Node + Express + Jade在我的网络浏览器中显示图像。我可以检索图像，例如：

FileRepository.prototype.getFile = function(callback,id) {
this.gs = new GridStore(this.db,id, 'r');
this.gs.open(callback);
};

但我不知道如何使用Jade View Engine渲染它。似乎没有文档中的信息。

有人能指出我正确的方向吗？

谢谢！

Answer 1

我想出来了（感谢蒂莫西！）。问题在于我对所有这些技术的理解以及它们如何结合在一起。对于任何有兴趣使用Node，Express和Jade显示来自MongoDB GridFS的图像的人......

MongoDB中的My Document引用了存储在GridFS中的Image，它是一个存储为的ObjectId 一个字符串。例如MyEntity {ImageId：'4f6d39ab519b481eb4a5cf52'}＆lt; - NB：ObjectId的字符串表示形式。我将它存储为字符串的原因是因为存储ObjectId给了我一个痛苦在路由中，因为它呈现为二进制，我无法弄清楚如何解决这个问题。（也许有人可以帮忙吗？）无论如何，我的解决方案如下：

FileRepository - 从GridFS中检索图像，我传入一个String Id，然后我转换为 BSON ObjectId（您也可以按文件名获取文件）：

FileRepository.prototype.getFile = function(callback,id) {
   var gs = new GridStore(this.db,new ObjectID(id), 'r');
   gs.open(function(err,gs){
      gs.read(callback);
   });
 };

翡翠模板 - 渲染HTML标记：

img(src='/data/#{myentity.ImageId}')

App.JS文件 - 路由（使用Express）我为动态图片设置'/ data /：imgtag'路径：

app.get('/data/:imgtag', function(req, res) {
  fileRepository.getFile( function(error,data) {
     res.writeHead('200', {'Content-Type': 'image/png'});
     res.end(data,'binary');
  }, req.params.imgtag );
});

这就完成了工作。有任何问题让我知道：）

Answer 2

我对你在这里尝试做什么感到有点困惑，因为Jade是文本输出（例如HTML）的压缩标记语言，而不是二进制内容。

由于您使用的是Jade，您可能会遇到以下情况：

app.get/'images/:imgtag', function(req, res) {
    res.render('image', {imgtag: req.params.imgtag);
});

所以试试这个：

app.get/'images/:imgtag', function(req, res) {
    filerep.getFile( function(imgdata) {
        res.header({'Content_type': 'image/jpeg'})
        res.end(imgdata);
    }, req.params.imgtag );
});

这将发送原始文件作为对具有正确mime类型的HTTP请求的响应。如果您想使用Jade来传递模板（例如图像弹出窗口），您可以使用不同的路径进行弹出窗口甚至使用数据：uri并在页面中对图像数据进行编码。

使用Node + Jade + Express渲染存储在Mongo（GridFS）中的图像

2 个答案: