I’m working on a movie recommendations web app, but I’m having trouble getting images from the backend to display on the frontend. When I directly use the image path, like this:
<img src={http://localhost:8000/images/Jailer.jpg
} alt={item.movieName} />
I can see the image of "Jailer" from the backend. But when I comment that line out and instead use item.movieImage, like this:
<img src={http://localhost:8000/images/${item.movieImage}
} alt={item.movieName} />
the image doesn’t render. In the tag, I’m seeing "Jailer.jpeg", so I know the image path is correct. I’ve tried to debug this, but I can’t figure out why it’s not working. Could you please help me out?
I don’t know to do can anyone help me guys?
2
Answers
It may be due to the difference in the extension of your photo in the url
One is jpg, the other is jpeg
The problem lies here , if you are checking locally then give the image path in your directory something like <img src= {"C:UsersShaankDesktopError_ImagesExcel File JS.png"}>. Note the filepath should be rendered dynamically since it is provided by backend. In this example we are just statically defining path.