React app從nodejs api獲取圖像數據

我有一個玩具反應應用程序，要求玩具nodejs服務器做一些圖像處理並返回結果。圖像處理服務器執行此操作：React app從nodejs api獲取圖像數據

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）更好的方法（比如也許是一個流？），那也是很好理解的。謝謝。

來源

2017-06-29 user1272965

可能的重複[是否可以將二進制圖像數據放入html標記中，然後在任何瀏覽器中像往常一樣顯示圖像？]（https://stackoverflow.com/questions/2429934/is-it-possible- to-put-binary-image-data-into-html-markup-then-get-the-image） –

是的，請參閱此問題以獲取更多信息 - https://stackoverflow.com/questions/2429934/is-它可能把二進制圖像數據到html標記，然後得到圖像 –

你需要實際讀取文件 –

如果您使用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：本地主機：9090 /應用程序的app.html是圖像上開口。

我希望這對你有用。

來源

2017-06-29 14:54:48 Vasi

React app從nodejs api獲取圖像數據

回答

相關問題