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

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");
});

​

`

这是我的ui，我想从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}