I've been trying to work with images in mongodb for the past while now. Every where I keep looking just says use GridFS due to the 16mb size restraint per document. However, each document Id like to store is <16mb. I currently stored it like this

var testChamp = new Champion ({
    name: "Aatrox",
    img: fs.readFileSync("D:/CounterMe/Aatrox_0.jpg"),
    contentType: "jpg"
});
testChamp.save(function() {
    console.log("Saved");
}) 

In my schema:

name: String,
img: Buffer,
contentType: String `

Finding this information in the mongoshell brings a HUGE amount of lines in cmd, so Im not sure if im even storing it correctly. If I am, I have no clue how to insert it into my html. I know how to retrieve the name, pass it in as an object:

app.get("/", function(req, response) {
    Champion.find(function(err, champs) {            
        response.render("index", {
        champ: champs[0]
        });            
    });
});

However, once I retrieve champs[0].img, im not sure what to do with it. How am I supposed to pass the img into my HTML? Any help would be appreciated, I am very stumped currently.

I've been trying to work with images in mongodb for the past while now. Every where I keep looking just says use GridFS due to the 16mb size restraint per document. However, each document Id like to store is <16mb. I currently stored it like this

var testChamp = new Champion ({
    name: "Aatrox",
    img: fs.readFileSync("D:/CounterMe/Aatrox_0.jpg"),
    contentType: "jpg"
});
testChamp.save(function() {
    console.log("Saved");
}) 

In my schema:

name: String,
img: Buffer,
contentType: String `

Finding this information in the mongoshell brings a HUGE amount of lines in cmd, so Im not sure if im even storing it correctly. If I am, I have no clue how to insert it into my html. I know how to retrieve the name, pass it in as an object:

app.get("/", function(req, response) {
    Champion.find(function(err, champs) {            
        response.render("index", {
        champ: champs[0]
        });            
    });
});

However, once I retrieve champs[0].img, im not sure what to do with it. How am I supposed to pass the img into my HTML? Any help would be appreciated, I am very stumped currently.

• javascript
• node.js
• mongodb

Share Improve this question Follow edited Jun 27, 2017 at 8:45 Neil Lunn 151k3636 gold badges355355 silver badges325325 bronze badges asked Aug 2, 2014 at 4:46 MeeohMeeoh 46344 silver badges1111 bronze badges 1

• This might be helpful gist.github./aheckmann/2408370 – Vivek Bajpai Commented Aug 2, 2014 at 5:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You really shouldn't be trying to render in HTML. I've seen approaches and they are all generally bad, and for one good reason.

The browser implements a cache, and as such any "images" it has retrieved before will be held in that cache. But if you are somehow attempting to "embed" that image data ( via Base64 encoding for example ) you are basically throwing away that caching capability and causing that data to be sent with every request.

If you must store images in MongoDB in this way then you should have a seperate endpoint in your API which would return what would be basically just an image. So make all requests "look like" they are just fetching an image from the web server.

First change your data a little to reflect what would be a "filename":

var testChamp = new Champion ({
    name: "aatrox.jpg",
    img: fs.readFileSync("D:/CounterMe/Aatrox_0.jpg"),
    contentType: "image/jpg"
});

Then you would have controller code like this:

app.get("/images/:image", function(req,res) {
    Champion.findOne({ "name": req.param.image },function(err,champ) {
       res.set("Content-Type", champ.contentType);
       res.send( champ.img );
    });
});

In your templates you then just refer to the URL of the image as you ordinarily would. You can add to that and possibly even store things like content length and set that in the response header as well. There are modules that you can use to detect mime-type and size from images uploaded through another API point prior to storing them as well. Have a look around for these.

This makes sense and is much more efficient than otherwise sending all of the image data within the HTML.

I asked this question when I was first getting into web development. Coming back to it 5 years later, my approach was definitely wrong. I was trying to store my images themselves in mongodb, when I should have been storing them in a storage service like S3, then just storing the urls to said images in mongodb. Hopefully this helps someone who es across this!