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

我有一个使用GridFS存储在Mongo中的小.png文件。 我想使用Node + Express + Jade在我的Web浏览器中显示图像。 我可以检索图像很好,例如:

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

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

任何人都可以指向正确的方向吗?

谢谢!

       

网上收集的解决方案 "使用Node + Jade + Express渲染存储在Mongo(GridFS)中的图像"

我明白了这一点(谢天谢地!)。 问题是我对所有这些技术的理解,以及它们如何组合在一起。 对于任何有兴趣使用Node,Express和Jade显示来自MongoDB GridFS的图像的人…

在MongoDB中的我的文档有一个存储在GridFS中的图像,它是一个存储为string的ObjectId。 例如MyEntity {ImageId:'4f6d39ab519b481eb4a5cf52'} < – NB:ObjectId的string表示forms。 我把它存储为一个string的原因是因为存储ObjectId给了我一个痛苦的路由,因为它呈现为二进制,我不知道如何解决这个问题。 (也许有人可以帮忙吗?) 无论如何,我的解决scheme如下:

FileRepository – 从GridFS检索图像,我传递一个stringID,然后转换为一个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); }); }; 

Jade模板 – 呈现HTML标记:

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

App.JS文件 – 路由(使用Express)我为dynamic图像设置'/ 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 ); }); 

而这样做的工作。 有任何问题让我知道:)

我对你在这里要做的事情感到有点困惑,因为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 ); }); 

这将发送原始文件作为对正确的MIMEtypes的HTTP请求的响应。 如果你想用Jade来传递一个模板(比如一个图像popup框),你可以使用不同的popuppath,或者甚至使用一个data:uri并在页面中对图像数据进行编码。