如何在mern stack中将图像从后端渲染到前端

Question

在这里，我正在尝试渲染后端/上传/图像中的图像。`

这是我的后端 server.js 文件

const express = require("express");
require("dotenv").config();
const cors = require("cors");
const { v4: uuidv4 } = require("uuid");
const app = express();
const postRoute = require("./routes/postRoute");
const userRoute = require("./routes/userRoute");
const DbConnection = require("./db/db");

DbConnection();
app.use(cors());
app.use(express.json());
app.use(express.static("uploads/images"));

app.get("/", (req, res) => {
  res.send("Home server");
});

app.use("/api", postRoute);
app.use("/api/users", userRoute);
app.listen(process.env.PORT || 5000, () => {
  console.log("Server started");
});

`

这是我的用户界面，我想从 mongodb 中提取标题（“hello”）和内容（“sadsaassa”）图像。

这就是我尝试拉取图像的方式 ../../../../backend/uploads/images/${detailedArticle?.imageUrl}} /> 有人可以帮助我吗？

Answer 1

由于 Nodejs 和 Reactjs 运行在不同的服务器上，因此您必须通过 http 访问图像，如下所示..

http://localhost:5000/{image}.png

Answer 2

当您使用 NodeJS 保存图像时，无法从本地目录访问它。

如果您尝试访问也运行节点服务器的本地计算机，请使用

http://localhost:3000/server/public/upload/{image}

如果您尝试从已部署的节点应用程序访问图像，请使用

http://abchost:3000/server/public/upload/{image}

Answer 3

只需在后端创建一个api = app.use('/images',express.static('上传/图像'));

前端代码是： /images/${product.image}} alt={产品.名称} />