Использование двоичных данных из коллекции 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")

Глядя на документ непосредственно в Монго (через robomongo), я получаю это

enter image description here

enter image description here

Я не знаю, чего мне не хватает, потому что в другом файле я использую jQuery datatables для отображения документов, и тот же подход там правильно отображает изображение, вот фрагмент кода данных

"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}
        ]

Ответы

Ответ 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 code, это должно быть:

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

Примечание. Вы можете избежать этого для небольших миниатюр или таких, но это не рекомендуемый подход по ряду причин (например, предел 16 МБ). Вы гораздо лучше используете GridFS. Подробнее в http://docs.mongodb.org/manual/core/gridfs