I want to get image from backend to frontend in MERN Stack - node.js

Question

I want to get image from backend to frontend in MERN Stack. all data gets about product also gets image title but images cannot render.
I want to get image from backend to frontend in MERN Stack. all data gets about product also gets image title but images cannot render
I want to get image from backend to frontend in MERN Stack. all data gets about product also gets image title but images cannot render
I want to get image from backend to frontend in MERN Stack. all data gets about product also gets image title but images cannot render
This is my frontend code
import "./Related.css";
import { NavLink } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { getMovies } from "../../../Redux/Actions/MoviesAction";
function Related() {
const dispatch = useDispatch();
const moviesList = useSelector((state) => state.MoviesReducer.list);
useEffect(() => {
withoutReload();
});
function withoutReload() {
dispatch(getMovies());
}
const [relatedProducts, setRelatedProducts] = useState(10);
const allProducts = moviesList.slice(0, relatedProducts);
const loadMoreProducts = () => {
setRelatedProducts(relatedProducts + relatedProducts);
};
return (
<>
<div id="related">
<div className="moviesContainer">
{allProducts.map((data, index) => {
return (
<div className="movies" key={index}>
<img src={data.picture} alt={data.picture} />
<div>
<h5 className="mb-0">{data.title}</h5>
<div className="cat">{data.category}</div>
<NavLink to={`/download-movie/${data._id}`}>View</NavLink>
</div>
</div>
);
})}
</div>
<div className="cancelBtn">
<button onClick={() => loadMoreProducts()}>Load More</button>
</div>
</div>
</>
);
}
export default Related;
This is my Backend code
const express = require("express");
const router = express.Router();
const addNewMoviesData = require("../Models/AddNewMovie");
const multer = require("multer");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "images/");
},
filename: function (req, file, cb) {
cb(null, file.originalname);
},
});
const upload = multer({ storage: storage });
router.post("/addNewMovie", upload.single("picture"), (req, res) => {
const addNewMoviesform = new addNewMoviesData({
picture: req.file.originalname,
title: req.body.title,
genre: req.body.genre,
duration: req.body.duration,
releaseDate: req.body.releaseDate,
size: req.body.size,
language: req.body.language,
description: req.body.description,
link: req.body.link,
category: req.body.category,
subCategory: req.body.subCategory,
});
addNewMoviesform
.save()
.then((data) => {
res.json(data);
})
.catch((error) => {
console.log(error);
});
});