React_Display Image 從服務器端到客戶端

Question

我有一個代碼，它允許我使用來自react client side的multer將文件發送到服務器folder uploads ，將數據發送到服務器的過程完美地工作，並且從服務器取回文件也完美地工作。

客戶端在3000下運行，服務器在4000下運行。

我現在面臨的問題是在前面部分顯示文件，例如img

 <img
            src={`http:\\localhost:4000\\server\\${text}`}
            className="messageText colorWhite"
            alt="img"
          />

錯誤圖像如下

text包含uploads/image1.jpg

當我檢查內容時，我發現了這個

這意味着圖像可以從服務器端很好地調用

有沒有可能幫我解決這個問題？

此致，

Answer 1

位於 localhost:4000 的服務器未提供包含文件的上傳文件夾。 您必須首先為上傳文件夾中的文件提供服務器。 例如，在快速服務器中，您可以通過指定此路由來訪問文件

app.get('/uploads/:filename', (req, res) => {
res.sendFile(req.params.filename, {root: path.join(__dirname, '/uploads')});
})

現在設置 src=http://localhost:4000\\uploads\\img.png 將獲得存儲在上傳文件夾中的圖像 img.png

Answer 2

作為替代解決方案，您可以通過以下方式服務器整個上傳文件夾

app.use(express.static("uploads"));

確保在“上傳”中指定完整路徑