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" />，但它也不起作用。这样做的正确“反应方式”应该是什么？
Stack Overflow用户
回答已采纳
发布于 2021-03-22 20:01:00
你是用快车为你的反应应用提供服务，还是在使用webpack开发服务器/创建-反应-应用？如果您的前端服务是从另一个港口(前。4000)您应该像以前那样指定绝对路径。但是，您将得到cors错误，并且有必要使用cors中间件启用它：https://expressjs.com/en/resources/middleware/cors.html第二个选项是使用代理在同一个域上运行后端和前端。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66752876
复制相关文章
相似问题
腾讯云开发者
