CODEWITHSUNDEEP
javascriptangularjsnode.jsmongodbmean-stack
Vaibhav Jain
Vaibhav Jain

Reputation: 2243

Efficient way to display images(serve images) in MEAN stack application?

I am developing a MEAN stack application and i want to display the images with some responses. Exact Requirement: There is search box , when user enter the name of the image , server should respond with that image and browser display that image. I have maximum of 70 images with size 30kb maximum. Should I store these inside the mongoDB and for every request node server hit the mongodb and serve that image in the response or I serve it with Angular.js? Please recommend the efficient way to do that.

Upvotes: 1

Views: 1266

Answers (2)

wolfhammer
wolfhammer

Reputation: 2661

You've got a little over 2mb of data which can be easily cached. Transferring from the database to the web server or retrieving from disk is extra work. Load all the images into your node thread and when the keyword comes through send the cached image.

Upvotes: 0

pedrommuller
pedrommuller

Reputation: 16056

You can setup a folder for static content (CSS, images, etc) do it in your expess.js configuration probably you'll find something like this:

app.use(express.static(path.resolve('./public')));
app.use('/images',express.static(path.resolve('youPathToStaticimages')));

Then create a collection with the image metadata, like file name, size, uploaded date, friendly name and maybe tags or any other field that you can query.

Then use an endpoint / $resource combination and retrieve the data and display the images in the client with a simple HTML image tag (IMG) and use ng-src, probably within a ngRepeat.

For me that could be the easiest way to do it, also you can set some sort of cache policy to your image folder in apache or ngnix.

Upvotes: 3

Related Questions