Home / Questions / 240788
Accepted
Nacho Zve De La Torre
Asked: 2020-02-26 06:05:04 +0800 CST 2020-02-26 06:05:04 +0800 CST

How to send an image from the back end to the front end with Node js & Express?

  • 772

I have the following problem, I need to send the response of a request to the view and I don't know how to do it since I am new with Node. I looked everywhere but found nothing.

var app = require('express')();
var http = require('http').Server(app);
var rp = require('request-promise');

var options = {
  uri: 'http://tapas.clarin.com/tapa/1990/02/22/19900222_thumb.jpg',

  headers: {
      'User-Agent': 'Request-Promise'
  },
  json: true // Json parse
};

rp(options)
  .then( res => {
    console.log(res)
  })
  .catch(function (err) {
      console.log(err)
  });

http.listen(3000, function(){
  console.log('listening on localhost:3000');
});

Printing this line gives console.log(res)me the binary image on the console, but what I need is to send that image to the view to be displayed. Any idea how to achieve it?

My view is very simple:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tapas Clarin</title>
</head>
<body>

    <div id="tapas">
        <!-- Acá quiero mostrar la imagen -->
    </div>
    <script src="./app.js"></script>
</body>
</html>

Thank you very much

nodejs

1 Answers

  1. Best Answer

    In the app.js file add:

    app.get('/image', function(req, res, next) {
    res.writeHead(200,{'content-type':'image/jpg'});
    fs.createReadStream(__dirname + '/public/images/miImagen.jpg').pipe(res);
});

    enter image description here

    Then in the browser http://localhost:4001/image (depends on the port you have configured)

    Now, since you need an image from the web add a library called image-downloader

    Therefore in app.js

    const download = require('image-downloader')
const options = {
  url: 'http://tapas.clarin.com/tapa/1990/02/22/19900222_thumb.jpg',
  dest: __dirname + '/public/images/'
}
app.get('/imageFromWeb', function(req, res, next) {
    download.image(options)
    .then(({ filename, image }) => {
      console.log('File saved to', filename)
      res.writeHead(200,{'content-type':'image/jpg'});
      fs.createReadStream(__dirname + '/public/images/19900222_thumb.jpg').pipe(res);
    })
    .catch((err) => {
      console.error(err)
      res.json(500)
    })
});

    Then in the browser http://localhost:4001/imageFromWeb(depends on the port you have configured)

    enter image description here

    In the case that it is not necessary to use NodeJS to display the image, use an html iframe .

    • 2