React 应用程序从 nodejs API 获取图像数据

我有一个玩具反应应用程序，它要求玩具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(更好的方法(比如流？(，那也很好理解。谢谢。

如果你使用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/应用程序.html应用程序打开并带有图像。

我希望这对你有用。

相关内容

最新更新

热门标签：