¿Como enviar una imagen del back end al front end con Node js & Express?

publicado por: Anonymous

tengo el siguiente problema, necesito enviar la respuesta de una petición a la vista y no sé como hacerlo ya que soy nuevo con Node. Lei por todos lados pero no encontré nada.

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');
});

Imprimiendo esta línea console.log(res) me sale la imagen en binario por consola, pero lo que necesito es enviar esa imagen a la vista para ser mostrada. ¿Alguna idea de como lograrlo ?

Mi vista es bien 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>

Muchas gracias

solución

En el archivo app.js agrega:

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

introducir la descripción de la imagen aquí

Después en el navegador http://localhost:4001/image (depende el puerto que tengas configurado)

Ahora bien, como necesitas una imagen de la web añade una libería llamada
image-downloader

Por lo tanto en 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)
    })
});

Después en el navegador http://localhost:4001/imageFromWeb(depende el puerto que tengas configurado)

introducir la descripción de la imagen aquí

En el caso que no sea necesario usar NodeJS para mostrar la imagen, usa un iframe de html.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.