Return image binary data from api and display on html

Question

I'm storing images at mongodb database. I want to display response i get from express api as image on client side. Image source looks like this

src="/image/data/5a44dde172aa021d107e7d33"

And i send back data like this. And when i write image url to browser it shows nothing.

var imgId = req.params.id;

imageModel.findById(imgId)
    .then((img) => {
        res.status(200).send(img.data);

    })
    .catch((exc) => {
        res.status(400).send();
    });

And i upload the file like this.

router.post("/", upload.any(), (req, res) => {


    if (req.files && req.files.length > 0) {
        for (var i = 0; i < req.files.length; i++) {
            var file = req.files[i];

            var image = new imageModel({ data: file.buffer.toString(), name: file.fieldname, createdBy: req.user.id });
            image.save(function (err, img) {
                if (err)
                    res.status(400).send(err);
                else
                    res.status(200).send(response.create(img));
            });
        }
    }
});

What am i doing wrong?

When i send img.data directly and paste image url to browser it prompts download. But when i call toString() on img.data and set content-type to image/jpeg it displays an image but as a blank square only. @hoangdv It's buffer type of mongoose. I think it stores data as binary. — aliemre
– aliemre, Commented Dec 29, 2017 at 6:46

aliemre · Accepted Answer · 2017-12-29 10:29:23Z

1

I'm solved this by changing

 file.buffer.toString()

to

 file.buffer.toString('binary')

on file upload code and

res.status(200).send(img.data)

to

 res.status(200).contentType("image/jpeg").send(new Buffer(img.data.toString(), 'binary'))

on get api method. It works as i expected, image can be displayed on page now.

answered Dec 29, 2017 at 10:29

aliemre

1294 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Return image binary data from api and display on html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related