Question

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

Answer 1

如果您使用快速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打开图片。

我希望这对你有用。

React app从nodejs api获取图像数据

1 个答案: