Store Image file in Binary data in mongoose schema and Display image in html form

Question

I am using Express, Node.js, and Mongodb to create the webpage that uploads and displays the image file.

I saved the binary of image in mongodb using schema.

Here is my little bit of code in index.js and db.js..

var Post = mongoose.Schema({
   image: {data: Buffer, contentType: String}
});

var post= new Post({ });
post.image.data=fs.readFileSync(req.file.path);
post.image.contentType='image/png';

and here is the part of mongo shell after I submitted image file and searched for post, and its image field

"image:     {"data:BinData(0,"iVBORw0KGgoAAAANSUhEUE....(I
just cut off the rest of the code.. cuz it was too long)          
rkJggg=="), 
"contentType" : "image/png" } 

so it seemed like it's successfully saving the binary data of image file in mogngodb,

but my problem is how to display the image on the webpage now using binary data. How do I convert binary buffer data to create image tag??

<img src= "data:{{image.contentType}};base64,{{image.data}}">

I tried this, but it gives me an error:

Failed to load resource: net::ERR_INVALID_URL

Could you guys please let me know how do I solve this?? I will really appreciate for your help :(((

Answer 1

First of all, you have to convert buffer data to base64. You can do it in back-end or front-end it does not matter. Just use yourBufferData.toString('base64'). Then you can use it.

However, I would suggest another way to store images instead of storing binary data. Assuming you use nodejs. You can create image in a repository with that binary data using fs.writeFile method. Then you can store that image path in record (db). AFter that, just put the file path into ng-src="file path which you saved". Here is the example which I use:

var path = 'upload/profiles/' +req.body.userId + '_profile.jpg';
      fs.writeFile(path, base64data, function(err) {
        if (err) return next(err);
        User.findByIdAndUpdate({
          _id: req.body.userId
        }, {
          $set: {
            profileImg: 'upload/profiles/' +req.body.userId + '_profile.jpg'
          }
        }, function(err, user) {
          if (err) return next(err);
          return res.send(user);
        });
      });

  <img ng-src="savedpath">