Displaying images stored in MongoDb

Question

I have an pinterest like application. Images and other related information are stored in MongoDb. Generally size of images is about 1 mb. Images are displaying with infinite scroll. When long script with base64 string is loaded, browser crashes or response time is really high (especially for Internet Explorer) What is the best way to display images that are stored in MongoDb?

Answer 1

I think the best way to achieve this, is to have you file physically in some public folder on your server. This should be accesible in a way that you will only need to use something like

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

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

Each time you store the image on mongo, be sure to also store the "image file" as itself on some public place on your server. Have in mind that you should keep the path to that file on the mongo model you are using. So, the next time you call the object, rather than get the base 64 image, you should only get the path to the image.

Lets say, you have this model

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

the next time you query on it, you can just ignore the image64 using mongo projection, and in you client side you just use some html tag that makes use of that url.

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

This will help you lots on performance.

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

Answer 2

I guess you have some server side part of this application? Why don't you create a tiny API to retrieve images?

So your browser will have information about image and can ask your server for it, something in line of http://your_server/api/image/imageID or http://your_server/images/imagename and then your server would just stream this image, you don't need to store this in the file system.

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