使用 Mongo 集合中的二进制数据作为图像源

Question

我有一个快速应用程序，将数据存储在 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 数据表来显示文档，并且相同的方法可以正确呈现图像，这里是数据表代码的 sn-p

"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 不提供 base64 字符串而是缓冲区。所以，你必须先转换它。我就是这样做的：

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

另外，你的前端jade代码有个小问题，应该是：

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

注意：对于小缩略图等，您可以避免使用此方法，但由于多种原因（例如 16MB 限制），这不是推荐的方法。使用 GridFS 会更好。更多http://docs.mongodb.org/manual/core/gridfs