How to send an image via HTTP using Express

Question

I'm developping a kind of API with NodeJS.

I need to do a kind of getImage that returns an image corresponding to the name into the url (ex: localhost:8080/getImage/myImg).

I found many tutorials on the internet but the problem is I mustn't use the writeFile and readFile from FS, because my images are stored into an Array with other JSON informations. The images that I'm storing are sent by another API in tomCat and my job is to limitate the calls to the tomCat API by setting up a NodeJS API.

My question is how to send an image stored into a variable/array/json ?

I tried the code below but when I'm going to localhost:8080/getImage/myImg, the code is executed, but nothing is returned. I didn't try to use a kind of tmp folder where I'm sotring images because I'm working on a big product and if I can limitate access to the disk it would be great.

app.get('/getImage/:name', (req, res) => {
  imagesArray.forEach( (image) => {
    if(req.params.name === image.small_image_name) {
      res.writeHead(200, {'content-type': 'image/jpeg'})
      res.end(image.small_image, 'binary')
    } else if (req.params.name === image.full_image_name) {
      res.writeHead(200, {'content-type': 'image/jpeg'})
      res.end(image.full_image, 'binary')
    }
  })
})

The thing I would make is : you do an http request to the url with an image name as parameter, to "download" the image and change the background of an element displayed on my main page.

Thank you for your future answers. have a nice day !

Your loop is dangerous, cause depending on the arrays contents it might never end the reuqest, or it might call ˋ.endˋ multiple times wich obviously won't work too. You should replace that forEach with a ˋ.findˋ that finds the image to send, then ˋ.endˋonce. Then you will probably find out that none of the images got found, thus nothing was returned — Jonas Wilms
– Jonas Wilms, Commented Jul 11, 2019 at 10:52

Terry Lennox · Accepted Answer · 2019-07-11 11:14:02Z

This code will do what you wish, I'm assuming that the image.small_image and image.full_image contain Buffer objects with the image data. If the image data is stored as a byte array or a base64 string, this is easy to convert to a buffer.

app.get('/getImage/:name', (req, res) => {
    const image = imagesArray.find(image => (req.params.name === image.small_image_name || req.params.name === image.full_image_name));

    if (!image) {
        res.status(404).send("Image not found");
        return;
    }

    const imageBuffer = (req.params.name === image.small_image_name) ? image.small_image: image.full_image;
    res.writeHead(200, { 'content-type': 'image/jpeg' })
    res.end(imageBuffer, 'binary')
});

I'm using port 3000 on my local machine, so the request url will look like:

http://localhost:3000/getImage/test.jpg

Another approach is to create a map of your images beforehand, this will increase retrieval efficiency. Be aware this could increase the memory requirement of the process.

const imageMap = imagesArray.reduce((map, image) => { 
    map[image.small_image_name] = { name: image.small_image_name, data: image.small_image };
    map[image.full_image_name] = { name: image.full_image_name, data: image.full_image };
    return map;
}, {});

app.get('/getImage/:name', (req, res) => {
    const image = imageMap[req.params.name];
    if (!image) {
        res.status(404).send("Image not found");
        return;
    }

    res.writeHead(200, { 'content-type': 'image/jpeg' })
    res.end(image.data, 'binary')
});

Tyler2P · Accepted Answer · 2021-02-22 02:50:47Z

0

the way I'm doing the request on the tomCat API is the following one

http.get('http://10.10.0.8:8080/CWallWeb/ajax/getImage.jsp?f=' + body.data[i].urlPreviewPath + '&d=' + date, res => {
    let body = ''

    res.on('data', data => {
        body += data
    });
    res.on('end', () => {
        small_image = body
    });
});

It is clearly not a buffer it is a string, how can I convert the result of the http request to a buffer?

edited Feb 22, 2021 at 2:50

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jul 11, 2019 at 11:25

AlexandreLemoine

311 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to send an image via HTTP using Express

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related