Блог

У меня есть простой проект, reactJs ,nodeJs,expressJs и в настоящее время я храню все свои данные в JSON file . Я использую multer npm Package для хранения изображения. Я храню файл таким образом в NodeJS. Код NodeJS загружает файл, но проблема в том, что я не могу отобразить это во внешнем интерфейсе

 var multer = require("multer");

var data = require("./data.json");
var userRouter = require("./routes/userRoutes");
const FILe_EXTENSION = {
  "image/png": "png",
  "image/jpeg": "jpeg",
  "image/jpg": "jpg",
};
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    console.log("mimetype", file.mimetype);
    const isValid = FILe_EXTENSION[file.mimetype];
    let uploadError = new Error("File Extension Not Supported");
    if (isValid) {
      uploadError = null;
    }
    cb(uploadError, "uploads");
  },
  filename: function (req, file, cb) {
    console.log("filename", file);
    const fileName = file.originalname.split(".")[0]; //replcing spaces with underscore
    const extension = FILe_EXTENSION[file.mimetype];
    console.log("filo", fileName);
    cb(null, `${fileName}-${Date.now()}.${extension}`);
  },
});

const upload = multer({ storage: storage });
var type = upload.single("avatar");
app.post("/upload", type, (req, res) => {
  const basePath = `${req.protocol}://${req.get("host")}/uploads/`;
  let imag = `${basePath}${req.file.filename}`;
  let obj = {
    id: Math.round(Math.random() * 100),
    title: req.body.title,
    description: req.body.description,
    created_at:  new Date(),
    image: imag,
  };
  data.push(obj);
  console.log("path", imag);
  res.status(200).send({ message: "stored" });
});
 

Полный путь к файлу выглядит следующим образом http://localhost:9000/uploads/background-1632727441391.jpeg

 Now how can I display this file in the frontend? I tried the below code but it's not showing the image
 

//display.js

  const displayPosts = () =>
        posts.map((post, index) => (
          <div className="container" key={index}>
            <div className="row">
              <div className="col-md-8 offset-md-2">
                <div className="card mb-3" style={{ maxWidth: "540px" }}>
                  <div className="row g-0">
                    <div className="col-md-4">
                      <img
                        src={post.image}
                        className="img-fluid rounded-start"
                        alt="..."
                      />
                    </div>
                    <div className="col-md-8">
                      <div className="card-body">
                        <h5 className="card-title"> {post.title}</h5>
                        <p className="card-text">{post.description}</p>
                        <p className="card-text">
                          <small className="text-muted">
                            {moment(post.created_at).fromNow()}
                          </small>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ));