从服务器端和客户端反应显示图像答案

【问题标题】：React_Display Image from server side into Client从服务器端和客户端反应显示图像
【发布时间】：2020-11-07 16:58:25
【问题描述】：

我有一个代码允许我使用multer 从react client side 向服务器folder uploads 发送文件，将数据发送到服务器的过程完美运行，并且从服务器取回文件也完美运行。

客户端在3000下运行，服务器在4000下运行。

我现在面临的问题是在前面显示文件，例如img

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

错误图片如下

text 包含 uploads/image1.jpg

当我检查内容时，我发现了这个

这意味着图像从服务器端调用得很好

可以帮我解决这个问题吗？

最好的问候，

【问题讨论】：

【解决方案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 存储在上传文件夹中

【讨论】：

根据您的解决方案，如果我在浏览器中从 <img src=url 复制 url => 它正在从服务器端获取文件但是当我刷新页面而不接触元素 img 我得到同样的结果没有显示
抱歉没能找到你
我测试了你的解决方案 => 当我写入浏览器 localhost:4000\uploads\img.jpg 时，它可以工作，并且它可以从服务器获取我想要的图像，但问题是在那个组件内部 <img> 结果是一样的显示
我接受了这个答案，我将继续我的搜索我认为前面有一些东西
我认为 http 后有一个错字，我已更正它，应该可以。 http:// 是正确的方式，而不是 http\

【解决方案2】：

作为替代解决方案，您可以通过以下方式将整个上传文件夹服务器化

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

确保在“上传”中指定完整路径

【讨论】：