Hello i am working on a Mern stack project where i have posts and each post has its image. In the back-end i am using multer to upload images to a directory i called uploads and everything works fine but when i want to display these images in my react js app it doesn't display the image . To do so i initialize a variable with this url
imagePath = "http://localhost:3000/"
then i concat this url with the path i stored in my database so my code look like this:
{allPosts?.map((post) => {
const image = imagesPath + post.image;
return (
<Post
profilePicture={profileImge}
dislikeCount={post.nbDislikes}
downloadCount={post.nbDownloads}
likeCount={post.nbLikes}
postImage={image}
postText={post.text}
time="1 hour ago"
username="John Doe"
shareCount={post.nbShares}
/>
);
})}
and i try to display it like this in the Post component
<img
src={postImage}
alt="LandingPageImage1"
className="w-[80%] object-fill md:h-[300px] mt-2 max-w-[90%]"
/>
but nothing is displayed even if i put in src the hole path like this : http://localhost:3000/uploads/image.png I searched a lot and tried so many things for example i can't use import to get the image since i pass the pass in the props, i tried require also but the same problem . The most thing that is confusing me that when i put the same path in the browser url bar it displays the image so can anyone help me please ?
