I am using the following code to read the image file saved in MongoDB using GridFs:

app.get('/picture', function(req, res) {

 var readstream = gfs.createReadStream({
    filename: 'trooper.jpeg'
 });

 readstream.on('data', function (data) {
  // We got a buffer of data...

 var buf2 = new Buffer(data).toString('base64'); 
 res.send(buf2.toString())
 console.log(buf2.toString());
 console.log(data);
});
  readstream.on('end', function () {
// File finished reading...
});

});

The output of console.log(buff.toString()); is:

dHJvb3Blci5qcGVn

The output of console.log(data); is:

<Buffer 74 72 6f 6f 70 65 72 2e 6a 70 65 67>

To display the image I did this:

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

I am unable to read and display the image in html from GridFs MongoDB

UPDATE:

I have tried this:

app.get('/picture', function(req, res) {
res.contentType('image/jpeg');
var readstream = gfs.createReadStream('trooper.jpeg');
readstream.pipe(res);

});

The output of the above is:

I am using the following code to read the image file saved in MongoDB using GridFs:

app.get('/picture', function(req, res) {

 var readstream = gfs.createReadStream({
    filename: 'trooper.jpeg'
 });

 readstream.on('data', function (data) {
  // We got a buffer of data...

 var buf2 = new Buffer(data).toString('base64'); 
 res.send(buf2.toString())
 console.log(buf2.toString());
 console.log(data);
});
  readstream.on('end', function () {
// File finished reading...
});

});

The output of console.log(buff.toString()); is:

dHJvb3Blci5qcGVn

The output of console.log(data); is:

<Buffer 74 72 6f 6f 70 65 72 2e 6a 70 65 67>

To display the image I did this:

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

I am unable to read and display the image in html from GridFs MongoDB

UPDATE:

I have tried this:

app.get('/picture', function(req, res) {
res.contentType('image/jpeg');
var readstream = gfs.createReadStream('trooper.jpeg');
readstream.pipe(res);

});

The output of the above is:

• javascript
• node.js
• mongodb
• mongoose
• gridfs-stream

Share Improve this question Follow edited Jan 21, 2016 at 12:52 Skywalker asked Jan 21, 2016 at 10:29 SkywalkerSkywalker 5,2041717 gold badges6666 silver badges127127 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Unless you really need to embed images into page, use pipes as of saintedlama's answer.

dHJvb3Blci5qcGVn is base64 encoded string "trooper.jpeg". Please ensure you correctly saved binary data to GridFS at the first instance.

You can query it directly and check content of the file stored in the db.

var Grid = require("gridfs-stream");
Grid.mongo = mongo; 

router.get("/:filename", function(req, res){ 
        gfs = Grid(db);
        var readstream = gfs.createReadStream({filename: req.params.filename}); 
        readstream.on("error", function(err){
            res.send("No image found with that title"); 
        });
        readstream.pipe(res);
    });

This is the perfect solution to get images from gridfs

You can just pipe the GridFS read stream to the response without buffering:

app.get('/picture', function(req, res) {
  // Set correct content type first
  res.contentType('image/png');

  fs
    .createReadStream('/tmp/Disneygoofy2012.jpeg')
    .pipe(res);
});

I guess the problem of your buffering solution was that you only pass the first byte package you receive from GridFS to res.send.