React 应用程序从 nodejs api 获取图像数据答案

【问题标题】：React app getting image data from nodejs apiReact 应用程序从 nodejs api 获取图像数据
【发布时间】：2017-12-03 07:13:13
【问题描述】：

我有一个玩具反应应用程序，它要求玩具 nodejs 服务器进行一些图像处理并返回结果。图像处理服务器这样做：

let result = path.join(__dirname, '/../../tmp/', name)
// .. write image to result
res.status(200).sendFile(result)

在客户端记录这个响应，我得到：

{ data: "...binary image stuff...", status: 200, etc }

(1) 如何将data 中的图像数据放入JSX 中的<img> 标记中？ src={response.data}?这不起作用

(2) 我做错了吗？只是回答 tmp 中的文件名然后让 img src 引用该路径的更好方法吗？这个想法似乎更好，除了我没有机会清理 tmp 文件，因为我不知道 img 标签何时完成获取它。

如果有比 (1) 或 (2) 更好的方法（比如流？），那也很好理解。谢谢。

【问题讨论】：

Is it possible to put binary image data into html markup and then get the image displayed as usual in any browser?的可能重复
是的，请参阅此问题了解更多信息 - stackoverflow.com/questions/2429934/…
你需要实际读取文件
@BrettDeWoody - 感谢您的参考。作为一个傻瓜是有道理的，但是你能给我关于这个问题的另一方面的任何建议吗？我是否应该避免发回 blob 并编写服务器文件？还是流？我想了解专业人士是如何做到的。
另一篇文章中的一个解决方案有一个很好的解决方法。你可以让你的 nodeJS 服务器返回图像文件，所以你可以使用<img src="/path/to/nodeJs/endpoint/" />。更多信息在这里 - stackoverflow.com/questions/17515699/…，看起来你已经在做。

标签： javascript node.js reactjs

【解决方案1】：

如果您使用 express js，您可以轻松发送图像文件。

例子，

// server.js

var express = require('express');
var path = require('path');

app.use('/app', function(req, res){
    res.sendFile(path.resolve(__dirname, './html/app.html'));
})

app.use('/image', function(req, res){
    res.sendFile(path.resolve(__dirname, './images/img1.jpg'));
})

app.listen(9090, function(err){
    if(err){
        console.log(err);
    }
    console.log('Listening at localhost:9090');
})

// app.html   html/app.html

<html>
    <body>
        <img src='/image'/>
    </body>
</html>

// img1.jpg images/img1.jpg
Your images has inside this folder.

运行你的服务器并点击 http:localhost:9090/app app.html 以图像打开。

我希望这对你有用。

【讨论】：