node.js - example - node js mongodb tutorial español

Usando datos binarios de la colección Mongo como fuente de imagen

Question

Tengo una aplicación exprés que almacena datos en mongo y que utiliza Jade como motor de visualización Tengo una ruta simple que obtiene los documentos en una colección particular, cada documento corresponde a un producto. La imagen está codificada en base64. Cuando intento y renderizo como una imagen aunque no funciona

Mi ruta es

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

La función que llama es

exports.getProducts = function(callback) {

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

y luego mi archivo Jade tiene el siguiente código

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

Mirando el documento directamente en Mongo (a través de robomongo) me sale esto

No sé lo que me estoy perdiendo, porque en otro archivo utilizo los datos de datos de jQuery para mostrar los documentos, y el mismo enfoque allí representa correctamente la imagen, aquí hay un fragmento del código de los datos de datos.

"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

El problema es que val.image.data no proporciona una cadena base64 sino un búfer. Entonces, tienes que convertirlo primero. Así es como lo hice funcionar:

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

Además, hay un pequeño problema en tu código de jade frontend, debería ser:

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

Nota: puede salirse con la suya para miniaturas pequeñas o similares, pero no es el enfoque recomendado debido a varias razones (como el límite de 16 MB). Estás mucho mejor usando GridFS. Más información en http://docs.mongodb.org/manual/core/gridfs