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

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

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

这是我的后端 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");
});

`

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

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

解决方法

由于 Nodejs 和 Reactjs 在不同的服务器上运行，你必须像这样通过 http 访问图像..

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

,

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

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

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

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

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