Rendering immagine memorizzata in Mongo (GridFS) con Node + Jade + Express

Question

Ho un piccolo file .png memorizzato in Mongo usando GridFS. Mi piacerebbe visualizzare l'immagine nel mio browser usando Node + Express + Jade. Posso recuperare l'immagine fine per esempio

FileRepository.prototype.getFile = function(callback,id) { 
this.gs = new GridStore(this.db,id, 'r'); 
this.gs.open(callback); 
}; 

ma non so come renderlo utilizzando il motore di visualizzazione di Giada. Non sembrano esserci informazioni nella documentazione.

Qualcuno può indicarmi la giusta direzione?

Grazie!

Answer 1

L'ho capito (grazie a Timothy!). Il problema era la mia comprensione di tutte queste tecnologie e di come si combinavano. Per chiunque sia interessato a visualizzare immagini da MongoDB GridFS usando Node, Express e Jade ...

Il mio documento in MongoDB ha un riferimento all'Immagine memorizzata in GridFS che è un ObjectId memorizzato come una stringa. per esempio. MyEntity {ImageId: '4f6d39ab519b481eb4a5cf52'} < - NB: rappresentazione di stringa di ObjectId. Il motivo per cui l'ho memorizzato come stringa era perché la memorizzazione di ObjectId mi dava fastidio nel routing mentre veniva eseguito il rendering come binario e non riuscivo a capire come risolvere il problema. (Forse qualcuno può aiutare qui?). In ogni caso, la soluzione che ho è di seguito:

FileRepository - Recuperare l'immagine da GridFS, passo in uno String Id, che ho poi convertire in un BSON ObjectId (è anche possibile ottenere il file in base al nome del file) :

FileRepository.prototype.getFile = function(callback,id) { 
    var gs = new GridStore(this.db,new ObjectID(id), 'r'); 
    gs.open(function(err,gs){ 
     gs.read(callback); 
    }); 
}; 

---

Jade Template - rendering del Tag HTML:

img(src='/data/#{myentity.ImageId}') 

---

App.JS il file - Routing (a mezzo Express) ho configurato il '/ data /: imgtag' percorso per immagini dinamiche:

app.get('/data/:imgtag', function(req, res) { 
    fileRepository.getFile(function(error,data) { 
    res.writeHead('200', {'Content-Type': 'image/png'}); 
    res.end(data,'binary'); 
    }, req.params.imgtag); 
}); 

---

E che ha fatto il lavoro. Qualsiasi domanda me lo faccia sapere :)

Answer 2

Sono un po 'confuso su ciò che si sta tentando di fare qui, poiché Jade è un linguaggio di markup condizionato per l'output di testo (come HTML), non per il contenuto binario.

Dal momento che si sta utilizzando Jade che probabilmente hanno qualcosa di simile:

app.get/'images/:imgtag', function(req, res) { 
    res.render('image', {imgtag: req.params.imgtag); 
}); 

Quindi provare questo:

app.get/'images/:imgtag', function(req, res) { 
    filerep.getFile(function(imgdata) { 
     res.header({'Content_type': 'image/jpeg'}) 
     res.end(imgdata); 
    }, req.params.imgtag); 
}); 

che invierà il file raw in risposta alla richiesta HTTP con il corretto tipo mime. Se vuoi usare Jade per consegnare un template (come un popup di immagini) puoi usare un percorso diverso per il popup o anche usare un dato: uri e codificare i dati dell'immagine nella pagina.