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

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'} < - NB:ObjectId的字符串表示.我将它存储为字符串的原因是因为存储ObjectId给了我一个痛苦的路由,因为它呈现为二进制,我无法弄清楚如何解决这个问题.(也许有人可以帮忙吗？)无论如何,我的解决方案如下:

FileRepository文件 -检索GridFS的形象,我传递一个字符串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)的condesed标记语言,而不是二进制内容.

既然你正在使用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并对页面中的图像数据进行编码.