Showing image from MongoDB that is stored as Buffer - node.js

Question

So I am storing an image like this:
router.post('/', upload.single('pic'), (req, res) => {
var newImg = fs.readFileSync(req.file.path);
var encImg = newImg.toString('base64');
var s = new Buffer(encImg, 'base64');
var newCar = {
picture: s,
contentType: req.file.mimetype,
link: req.body.link
}
})
});
Now the data looks like this:
{
_id: 5a502869eb1eb10cc4449335,
picture: Binary { _bsontype: 'Binary',
sub_type: 0,
position: 1230326,
buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49
48 44 52 00 00 05 00 00 00 03 1e 08 06 00 ... >
},
contentType: 'image/png',
link: 'fds',
__v: 0
}
I want to show this picture on frontend, like this:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
In my case, this code will be:
<img src="data:<%= c.contentType %>;base64, <%= c.picture %>" />
And all I am getting is some weird symbols:
I think I tried almost everything, and still can't figure out what is this. Even when I convert that Buffer toString('ascii'), I am still getting some symbols (boxes) that can't be recognized.
What am I supposed to do?
P.S. Also, is this a good way to store images? (less than 16MB), I think I noticed it's kinda slow, cuz of those long strings converting and reading file, compared to case where I just store the image as file?

Answer 1

HTML
<img [src]="'data:image/jpg;base64,'+Logo.data" height="50" width="60" alt="Red dot" />
Data from database:
"Logo" : {
"data" : BinData(0,"/9j/4AAQSkZJRgABAQEAYABgAAD/"),
"name" : "dp.jpg",
"encoding" : "7bit",
"mimetype" : "image/jpeg",
"truncated" : false,
"size" : 895082
}
Hope it help's