How to display multiple images from MongoDB in browser using node js

Question

I have multiple photos (images) stored in my MongoDB database which has following schema :

schema = new Schema( {
   name : String,
   photo : {data:Buffer, contentType: String}
});

Now, let us assume that I have hundred photos stored in the database by above schema with each photo stored as a document.

I want to view all these stored pictures in browser by firing a post API with each page showing 10 photos. There should be a 'prev' or 'next' button which will help me go to the previous or next page respectively.

I have tried following code, which is always showing the last photo coming in the result set when the forEach loop iteration ends.

app.post('/show', function(req, res) {
   var ph;
   //model is a mongodb model object for the schema
   model.find({}, function(err, result) {
   result.forEach(function(pic) {
   ph = pic['photo']['data'];
   })

  res.writeHead(200, {'Content-Type': 'image/jpeg' } );
  res.end(ph, 'binary');
});
}

Any help on how can I write the html to dynamically show the fetched pictures from database on the browser would be great help.

Thanks.

Don't do it like that. Instead make an API endpoint that fetches each image by a supplied id value. Then simply point at that end point in your <img src=" just like you would with any regular image. That's the way to do it, and let the browser do the work of caching and handling image requests. — Neil Lunn
– Neil Lunn, Commented Aug 10, 2017 at 11:59
You need HTML to display multiple images. You cannot send multiple images with a content type of image. This would be a good start to render a single image which you could call from an HTML page. — Shaun Frisbee
– Shaun Frisbee, Commented Aug 10, 2017 at 12:00
@Neil Lunn If I do not know how many images are there in the database..then how would I know how many <img src =" is required to display them? — A.G.Progm.Enthusiast
– A.G.Progm.Enthusiast, Commented Aug 10, 2017 at 17:02

njLT · Accepted Answer · 2017-08-10 18:44:35Z

1

Instead of forEach use map

ph = result.map(pic => pic['photo']['data']);

This will give you the 100 photos in the ph array. You might want to just get 10 photos at a time, in which case take a look at this

answered Aug 10, 2017 at 18:44

njLT

4747 silver badges22 bronze badges

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

2 Comments

A.G.Progm.Enthusiast Over a year ago

This answer of getting a definite number of photos from Mongo DB is fine. However, I wanted a dynamic div list kind of display on the client side with a next button. Suppose I will get all the items from db in an array or similar structure. I will first show 10 and then clicking on next button the next 10 will be shown destroying the earlier display. If you can provide some hint or links to achieve this through NodeJS would be helpful.

njLT Over a year ago

Like I stated above, you can provide all the data in one go as an array, though you probably shouldn't use such a thing when you have a large amount of data. Your frontend should take care of the pagination and have nothing more to do with the backend(nodejs). Otherwise you need implement pagination which was described in the prev link, the first method being simple, provided you maintain an appropriate index on your db. You will need a custom header in your request. Take a look at twitter's api. You can either return the data or an html block.

VirgilCane · Accepted Answer · 2019-06-05 13:29:47Z

0

You could push an array containing all entries in your db to your HTML like so:

var ph;

app.get('/show',(req,res)=>{


model.find({}, async (err,cb)=>{ 
    if(!err){
        ph = await cb;

    }else{
        throw err;
    }

res.render('your_ejs_file_here.ejs',{ph: ph});

});

answered Jun 5, 2019 at 13:29

VirgilCane

492 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to display multiple images from MongoDB in browser using node js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related