使用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进行渲染。 在文档中似乎没有任何信息。

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

谢谢！

Answer 1

我明白了这一点（谢天谢地！）。 问题是我对所有这些技术的理解，以及它们如何组合在一起。 对于任何有兴趣使用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 ); }); 

---

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

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 ); }); 

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