Fetch image from mysql database using node.js

Question

I have stored my images in mysql database.When I am trying to retrieve them I am getting my image along with a lengthy string of buffer.Here goes my code:

var sql ="SELECT rname,image FROM recipes WHERE ringre LIKE '%" +items[0]+"%' ";
    for( var i=1;i<items.length;i++){
        sql = sql + "AND ringre LIKE '%"+items[+i]+"%' ";
    }

    console.log(sql);

    con.query(sql, function(err,result){
        if(err){
            throw err;
        }else{
            console.log(result);
            var result1 = JSON.stringify(result);
            res.render("recipes_response",{ data: result[0].image.toString('base64'), recipes: result1});
        }
    });

 });

and the result is:

But I just want the image and rname. Will anybody help me out?

you have rname and image in the result. please clarify your issue — Mr.
– Mr., Commented May 19, 2020 at 8:19
I have but I don't want the image's description.I just want image and the rname — user14
– user14, Commented May 19, 2020 at 8:51

Terry Lennox · Accepted Answer · 2020-05-19 09:38:57Z

2

I'm assuming that you're using EJS templates, so if you write:

con.query(sql, function(err,result){
    if(err){
        throw err;
    }else{
        res.render("recipes_response", { data: result[0].image.toString('base64'), rname: result[0].rname});
    }
});

Then in your /views/ folder create recipes_response.ejs

recipes_response.ejs

<html>
<body>
    <div class="container">
        <h3>Image test</h3>
        <div>
            <h4>Recipe name: <%= rname %></h4>
            <img src="data:image/png;base64, <%= data %>" alt="DB Image" />
        </div>
    </div>
</body>
</html>

Multiple Recipes

con.query(sql, function(err,result){
    if(err){
        throw err;
    }else{
        let recipes = result.map(row => { return { rname: row.rname, image: row.image.toString('base64')}});
        res.render("recipes_response_list", { recipes } );
    }
});

Then create a new template:

recipes_response_list.ejs

<html>
<body>
    <div class="container">
        <h3>Recipes</h3>
        <%  for (let recipe of recipes){ %> %>
        <div>
            <h4>Recipe name: <%= recipe.rname %></h4>
            <img src="data:image/png;base64, <%= recipe.image %>" alt="Recipe image" />
        </div>
        <% } %>
    </div>
</body>
</html>

edited May 19, 2020 at 9:38

answered May 19, 2020 at 8:50

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Terry Lennox Over a year ago

Great, glad to be of help.. happy coding! :-)

user14 Over a year ago

Another query...How to retrieve and display multiple images and rnames of same ringre

user14 Over a year ago

For example I have an ingredient(ringre) of name herbs.With this ingredient I have multiple recipes with images in my database,so now I wanted to retrieve all rnames and images with herbs ingredient.How can I do that

Terry Lennox Over a year ago

You can loop over values in EJS, so if you create an array of items, say arrayData, e.g. render('viewname', { recipeArray: [...] } ), then in the template: <% for (let recipe of reciperArray){ %>.. I'll update in the answer!

Terry Lennox Over a year ago

I've updated the answer, NB, I've added a new template as well.

|

Collectives™ on Stack Overflow

Fetch image from mysql database using node.js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related