ReactJS 无法使用 node.js 显示来自后端文件夹的图像

Question

我是 React.js 的新手，我有一些来自数据库的数据（操作）。 每个动作都有一系列图像。

我无法在图像标签中显示图像。 图像存储在后端文件夹结构中，如下所示：

我正在阅读一些问题并尝试使用express.static()但它对我不起作用：

服务器.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" />但它也没有用。 这样做的正确“反应方式”应该是什么？

Answer 1

而不是这个：

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(...)你会提到你的图像文件的完整路径。

Answer 2

您是使用 express 服务您的 react 应用程序，还是使用 webpack-dev-server/create-react-app？ 如果您的前端从不同的端口（例如 4000）提供服务，您应该像以前一样指定绝对路径。 However, you will get the cors error and it will be necessary to enable it with cors middleware: https://expressjs.com/en/resources/middleware/cors.html The second option is to use proxy to run backend and frontend on同一个域。

Answer 3

您可以只创建一个像 uploads 这样的文件夹，而不是在 uploads 文件夹中嵌套操作。 然后可以通过这个urllocalhost:3333/uploads/1616437561024-foto54.jpg在浏览器中查看图片

// Function to serve all static files
app.use("/uploads", express.static("uploads"));