Display Image in GridFS

Question

I am using gridfs-stream https://github.com/aheckmann/gridfs-stream & currently i am on displaying image from gridFS.

When reading data it gives me following output. When i append this data to <img src="data:image/jpeg;base64,(data)">, the image doesn't show.

  gfs
// create a read stream from gfs...
.createReadStream({ filename: 'error1.png' })
// and pipe it to Express' response
.pipe(res);

Output res :- enter image description here

Edited :-

I tried this :-

img.src = 'data:image/jpeg;base64,' + btoa(res);

Output rendered is :-

<img src="data:image/jpeg;base64,W29iamVjdCBPYmplY3Rd">

No image shown.

I think the response is binary data, not base64 encoded, so just try — Andrew, Mar 06 '14 at 08:55
i experimented....i copied the binary directly from db & appended it in `src` like `data:image/jpeg;base64,(data from db)`....and image got displayed. — Anup, Mar 06 '14 at 08:58
I see what you want to do now, reading the binary data and echo — Andrew, Mar 06 '14 at 09:01
By using link src, you need a new page which output the data directly, so you can set src="new page output binnary image data" — Andrew, Mar 06 '14 at 09:02

score 6 · Accepted Answer · answered Mar 06 '14 at 09:28

I use file stream demonstrate:

var rstream = fs.createReadStream('test.png');

var bufs = [];

rstream.on('data', function(chunk) {

    bufs.push(chunk);

}).on('end', function() { // done

    var fbuf = Buffer.concat(bufs);

    var base64 = (fbuf.toString('base64'));

    res.send('<img src="data:image/jpeg;base64,' + base64 + '">');
});

Display Image in GridFS

1 Answers1

Linked