使用来自Mongo收集的二进制数据作为图像源

我有一个快速的应用程序，用mongo存储数据，使用Jade作为视图引擎。 我有一个简单的方法来获取特定集合中的文档，每个文档对应于一个产品。 该图像是base64编码。 当我尝试渲染图像虽然不起作用

我的路线是

exports.index = function(req, res){ mongo.getProducts(function(data) { res.render('consumer/index', {user: req.session.user, products: data}); }); }; 

调用的函数是

 exports.getProducts = function(callback) { Product.find().exec(function(err, products){ return callback(products); }); }; 

然后我的Jade文件有以下代码

 each val in products img(src="data:image/png;base64,'+#{val.image.data}+'", alt='Image', style="width: 20px; height: 20px") 

在Mongo直接看文档（通过robomongo）我得到这个

我不知道我在想什么，因为在另一个文件中，我使用jQuery数据表来显示文档，并且在那里正确地呈现图像，这是一个数据表代码的片段

 "aoColumns": [ {"mData": "name"}, {"mData": "price"}, {"mData": "category"}, {"mData": "description"}, {"mData": "image.data", "mRender": function ( data, type, full ) { return '<img src="data:image/png;base64,'+data+'", style="width: 20px; height: 20px"></>'}}, {"mData": "promoted"}, {"mData": null} ] 

Answer 1

问题是val.image.data不提供一个base64string，但一个缓冲区。 所以，你必须先转换它。 这就是我的工作原理：

 Product.findById('559f6e08b090ca5c5ce6942b', function(err, result) { if (err) throw (err); var thumb = new Buffer(result.image.data).toString('base64'); res.render('index', { title: 'Express', img: thumb}); }); 

此外，你的前端玉代码有一个小问题，它应该是：

img(src="data:image/jpeg;base64,#{img}") //No + and ''

注意：你可以用小缩略图或类似的方式逃脱，但由于一些原因（如16MB的限制），这不是推荐的方法。 使用GridFS你会好得多。 更多信息请访问http://docs.mongodb.org/manual/core/gridfs