I'm just trying to use a URL in my front end react code, that leads me to an image inside of my Images folder in my node.js server, except it doesn't show up on the front end, it's just blank. I'm baffled right now. I had it working for a split second but for some reason the images just vanished all together when I started shifting things around in various folders. But I have the most basic file / folder structure:
On the front end:
function App() {
return (
<div>
{/* submit an image */}
<img src={"http://<MyIPAddress>:8080/Images/filler image 1 w300.jpg"} id="image-one" style={{width:'100%'}}></img>
</div>
);
}
and my file structure on my node server is simply this:
test-react-server/Images/filler image 1 w300.jpg
the test-react-server folder is the most root level with the server.js file:
test-react-server/server.js
Images is just a folder inside of the root folder, just like you would see the public folder or src folder. I'm totally stumped of why this could be happening. If you could help pin point it I would greatly appreciate that.
I've tried various things, making sure the URL is correct copying via relative path. Tried writing in %20 in the spaces. Tried writing the image and front end src url without spaces. Played with img width and height. Nothing worked. My image remains blank and empty.
Note: currently not using express, only node.js. No alt image or broken image is being displayed, it's just empty and invisible on my front end.