Return image from Node REST API and use in img.src on client-side

Question

I am storing images in MongoDB as base64 string. I created Express route to get image by id:

router.get('/:userId/images/:imgId', (req, res) => {
  Image.findOne(
    { _id: req.params.imgId },
    (err, img) => {
      if (err) {
        res.status(500).send('someErr');
      } else {
        var resultImg = Buffer.from(img.data, 'base64');
        res.writeHead(200, {
          'Content-Type': 'image/png',
          'Content-Length': resultImg.length
        });
        res.end(resultImg);
      }
    }
  );
});

Client-side:

<img src={`api/users/${userId}/images/${imgId}`} />

What I am sure about:

path is correct, server receives request and returns 200 response
data is correctly fetched from MongoDB
base64 string is correct (when I copy paste to verifier like https://codebeautify.org/base64-to-image-converter, it is working)

Why images are not loaded?

try changing res.end(resultImg) to res.end(resultImg, 'binary'); — Amir Masud Zare Bidaki
– Amir Masud Zare Bidaki, Commented Sep 23, 2018 at 18:13

mohammad mohammad · Accepted Answer · 2018-09-23 19:01:25Z

1

make sure the output has this string at the beginning

<img src='data:image/png;base64,your base 64 goes here'/>

you can test by copying the output and put it in a static html and see does it work. so may be something like this would help

<img src=`data:image/png;base64,{`api/users/${userId}/images/${imgId}`}`/>

answered Sep 23, 2018 at 19:01

mohammad mohammad

3944 silver badges9 bronze badges

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

Comments

Arief Kahfi · Accepted Answer · 2018-09-23 18:28:48Z

-1

Have you try hit your backend using AJAX or Fetch API ? After that, you can load response from that API into your image element

answered Sep 23, 2018 at 18:28

Arief Kahfi

252 silver badges6 bronze badges

1 Comment

Arief Kahfi Over a year ago

You can check this gist here

Collectives™ on Stack Overflow

Return image from Node REST API and use in img.src on client-side

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related