ReactJS无法使用node.js显示后端文件夹中的图像
ReactJS无法使用node.js显示后端文件夹中的图像
提问于 2021-03-22 19:45:06
我是React.js的新手，我有一些来自数据库的数据(动作)。每个动作都有一系列的图像。
我不能在图像标签中显示图像。图像存储在后端文件夹结构中，如下所示：
我正在阅读一些问题，并试图使用express.static()，但它对我无效：
server.ts
const express = require("express");
const cors = require("cors");
const routes = require('./routes');
const app = express();
app.use(cors());
app.use(express.json());
app.use('/uploads/actions', express.static('uploads/actions'));
app.use(routes);
app.listen(3000);前部
{
topicData.map((topic) => (
<div className="topic-data" key={topic.id}>
<div className="title">
<p>{topic.title}</p>
</div>
<div className="description">
<p>{topic.description}</p>
</div>
<div className="media">
{topic.images.map((image) => (
<img key={image.id} src={"/uploads/actions/" + image.image} alt="file" />
))}
</div>
<div className="contribute-btn">
<button onClick={() => contributions()}>Add comments</button>
</div>
</div>
));
}我试过usgin <img key={image.id} src={"http://localhost:3333/uploads/actions/" + image.image} alt="file" />，但它也不起作用。这样做的正确“反应方式”应该是什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-03-22 20:01:00
你是用快车为你的反应应用提供服务，还是在使用webpack开发服务器/创建-反应-应用？如果您的前端服务是从另一个港口(前。4000)您应该像以前那样指定绝对路径。但是，您将得到cors错误，并且有必要使用cors中间件启用它：https://expressjs.com/en/resources/middleware/cors.html第二个选项是使用代理在同一个域上运行后端和前端。
Stack Overflow用户
发布于 2021-07-31 20:36:11
您可以只创建一个类似上传的文件夹，而不是在“上传”文件夹中创建嵌套操作。然后，您可以通过这个url localhost:3333/uploads/1616437561024-foto54.jpg在浏览器中查看图像。
// Function to serve all static files
app.use("/uploads", express.static("uploads"));
Stack Overflow用户
发布于 2021-03-22 19:55:13
而不是这样：
app.use('/uploads/actions', express.static('uploads/actions'));用这个：
// don't forget to require the "path" module before that
const path = require('path');
app.use('/uploads/actions', express.static(path.join(__dirname, 'uploads/actions')));实际上，对于Path.join(.)，您将提到图像文件的完整路径。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66752876
复制相关文章
相似问题
腾讯云开发者
