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

如何使用 Node js & Express 将图像从后端发送到前端？

  • 772

我有以下问题，我需要将请求的响应发送到视图，但我不知道该怎么做，因为我是 Node.js 新手。我到处找，但一无所获。

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

打印这一行会给console.log(res)我控制台上的二进制图像，但我需要将该图像发送到要显示的视图。知道如何实现吗？

我的看法很简单：

<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>

非常感谢

nodejs

1 Answers

  1. Best Answer

    在 app.js 文件中添加：

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

    在此处输入图像描述

    然后在浏览器中http://localhost:4001/image（取决于你配置的端口）

    现在，由于您需要来自网络的图像，因此添加一个名为 image-downloader的库

    因此在 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)
    })
});

    然后在浏览器中http://localhost:4001/imageFromWeb（取决于你配置的端口）

    在此处输入图像描述

    如果不需要使用 NodeJS 来显示图像，请使用html iframe 。

    • 2