Is it possible to render binary images data store in mongoDB to handlebars template?

Question

I´m looking for some help. I´m creating a gallery application using nodejs, mongoDB and handlebars template to show the gallery. Everything goes fine till I find all images in my mongoDB (stored as Binary Data) and try to render in my handlebar template. I'm trying this:

routes.js

router.get('/gallery', async (req, res) =>{
    const pics = await Img.find();
    console.log(pics);    // No problems showing images as binary data and all fields in the Schema
    res.render('images/gallery.hbs', {pics}); 
});

template.hbs

    {{#each pics}}
        <div class="row"> 
           <img src='????'> 
            </div> 
    {{/each}}

where???? is my big problem, I don't know what's the code to put there or if I'm using the right way. Pls help. I'm newer on this

Answer 1

if you are storing binary you can be added to the src of course, but you should consider the metadata associated with the binary like this:

<img src="data:image/png;base64,...">

Note: This is a bad practice by the way, and you should never save the images on the DB whatever the case, you can use external service like aws s3 and upload your images there and store their Uri instead, they're a lot of reasons for this the biggest one it gonna cost you a lot of money -_-