Display images stored in MongoDb

Question

I have pinterest as an application. Images and other relevant information are stored in MongoDb. Typically, the image size is about 1 mb. Images are displayed with endless scrolling. When loading a long base64 script, browser errors or response times are really high (especially for Internet Explorer) What is the best way to display images stored in MongoDb?

Answer 1

I think the best way to achieve this is to physically file in some shared folder on your server. It should be accessible in such a way that you will need to use something like

http://www.myhost.com/images/my/path/to/image.jpg

You can still save the Base64 image in mongodb as a backup, however this is not the best way to get your images due to performance issues (as you saw). I recommend you do the following:

Each time you store an image on mongo, be sure to save the "image file" as yourself in some public place on your server. Keep in mind that you must save the path to this file on the mongo model you are using. So, the next time you call the object, and not get the image of base 64, you should only get the path to the image.

Let's say you have this model

myModel = { name: "some name", image64: "someextralongstringveryveryveryweird......", imageUrl: "/images/my/path/to/image/imagename-id.jpg" } 

at the next request on it, you can simply ignore image64 using the mongo projection, and on your client side you just use some html tag that uses this URL.

 <img src="/images/my/path/to/image/imagename-id.jpg"> 

This will help you achieve great results.

There are several libraries that could help you manage image creation. ImageMagick is the one I used and is so versatile.

Answer 2

I assume that you have a server side part of this application? Why don't you create a tiny API for extracting images?

Thus, your browser will have information about the image and may ask you for its server, something in the line http://your_server/api/image/imageID or http://your_server/images/imagename , and then your server will just transfer this image, you do not need to store it in the file system.

On the client side (browser), you just need to implement "lazy loading".

Answer 3

If you use MongoDB, you must store images in your database using GridFS ( http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/ ), which exposes something as a virtual file system for your application.

Using GridFS, you can write a controller method that passes the requested file from your MongoDB instance and passes the contents of the file in response.

Answer 4

I would recommend storing images in a file system and using your web server to serve their clients. For performance, I would put them on a CDN that can handle traffic.

In your application store (mongo), you can save the URL / location for the image and then use it when retrieving the image in your javascript code.

Also, in your code, I would recommend preloading the images through javascript, which preloads the images before the user scrolls through them. There are some great tools you can use for this.

In case you cannot change the repository and you have to use mongo as it is, I would look at preloading images using javascript .