Utilizzo di dati binari dalla raccolta Mongo come origine immagine

Question

Ho un'app express, che memorizza i dati in mongo, utilizzando Jade come motore di visualizzazione. Ho un percorso semplice che ottiene i documenti in una raccolta particolare, ogni documento corrispondente a un prodotto. L'immagine è codificata in base64. Quando provo e rendere come immagine se non funziona

Il mio percorso è

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

La funzione che chiama è

exports.getProducts = function(callback) { 

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

e quindi il mio file di Giada ha il seguente codice

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

Guardando il documento direttamente in Mongo (via robomongo) ottengo questo

Non so che cosa mi manca, perché in un altro file che uso DataTable jQuery per mostrare i documenti, e lo stesso approccio si rende correttamente l'immagine, ecco un snippet del codice dati

"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

Il problema è val.image.data non fornisce una stringa base64 ma un buffer. Quindi, devi prima convertirlo. Questo è il modo che ho fatto il lavoro:

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

Inoltre, c'è un piccolo problema sul vostro codice di giada frontend, dovrebbe essere:

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

Nota: Si potrebbe ottenere via con questo per i piccoli miniature o simili ma non è l'approccio consigliato a causa di una serie di motivi (come il limite di 16 MB). Stai molto meglio usando GridFS. Altro a http://docs.mongodb.org/manual/core/gridfs