8

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?

kparkin
  • 325
  • 3
  • 7
  • 20

5 Answers5

6

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.

Roger
  • 579
  • 4
  • 13
  • 2
    Why not store images in mongodb? – IntoTheDeep Feb 16 '18 at 18:39
  • 1
    It is much faster to retrieve queries containing the URL to a file than retrieving the file itself and I think this answers your question in a different perspective https://stackoverflow.com/questions/7703867/storing-image-files-in-mongo-database-is-it-a-good-idea – Roger Feb 16 '18 at 19:56
3

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

strah
  • 6,702
  • 4
  • 33
  • 45
3

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.

Aaron Hammond
  • 617
  • 4
  • 9
2

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.

Ray Hunter
  • 15,137
  • 5
  • 53
  • 51
  • 1
    What if I want to store them in db? – IntoTheDeep Feb 16 '18 at 18:41
  • @TeodorKolev, you can store them in a db. I would recommend base64 encoding the binary file and storing that in the db. Then you can serve up the base64 image if you want or convert it back to binary via another process. There might be some performance issues to take into account as well. – Ray Hunter Feb 18 '18 at 01:52
  • @TeodorKolev depends on the language you want to use. You can search StackOverflow about converting an image to base64 in your development language. Then store that value in mongodb. When you display it on the web you should do something like this ``. Where `datahere` is the base64 image data. The `image/png` should be the mimetype of the image data. So make sure you have that information saved for the image. – Ray Hunter Feb 19 '18 at 15:09
  • 1
    Can you explain why you recommend fs instead of db? – Nux May 17 '19 at 16:09
  • 1
    @Nux the db will have to be queried to get the image which causes additional overhead. With the filesystem you can have that setup to be handled by the webserver and your application can focus on the business logic. You can also use a CDN for your images, so that you dont even have to serve them from your web server. – Ray Hunter May 17 '19 at 16:26
1

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">.
Invvard
  • 1,497
  • 2
  • 15
  • 20
Yawo
  • 13
  • 2