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?

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?

• javascript
• c#
• mongodb
• base64

• Is there any requirement for base64 encoding of the images? Mongo supports binary data... – Peter Brittain Commented Aug 4, 2016 at 18:58

5 Answers 5

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.

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'.

If you're using MongoDB, you should be storing images in your database using GridFS (http://excellencenodejsblog.com/gridfs-using-mongoose-nodejs/), a feature which exposes something like a virtual filesystem for your application.

Using GridFS, you could write a controller method which streams a requested file from your MongoDB instance and pipes the file content to the response.

I would recommend storing the images on the filesystem and using your web server to handle serving them to clients. For performance, I would put them on a CDN - that will be able to handle the traffic.

In your application storage (mongo), you can store a URL/location to the image and then use that when retrieving the image in your javascript code.

In addition, in your code I would recommend preloading images via javascript that preloads images before the user has scrolled to see them. There are some great tools out there that you can leverage for that.

In the off chance that you cannot change the storage and you have to use mongo the way it is - I would look at preloading images with javascript.

I was having the same issue. So i used a mongodb to store my images.

This is how I proceeded:

Define a logo schema:

var logoSchema = new mongoose.Schema({
    name: String,
    url: String
});

Compile the logo schema into a model:

var Logo = mongoose.model("Logo", logoSchema)

Creating a new logo:

var rectblack = new Logo({
    name:"rect&black",
    url:"public/image.jpg"
});

Saving it :

rectblack.save(function(err, logo){
    if(err){
        console.log("some went wrong")
    } else {
        console.log("logo saved")
        console.log("logo")
    }
});

Now to use this logo or image I just called it with the image tag (just the file name!!!):

<img src="/image.jpg">.