React page is different when using "npm start" and "npm run deploy"

Question

I am building my website and I have issues using npm start to preview images in my web-pages.

When using npm start to preview locally my page all the images and videos cannot be found but when I deploy online using github gh-pages -d build everything shows just fine. As you can see no images on localhost: images and videos missing from my page in localhost But once online no issues: perfectly fine website once online

I use React to build the website and github-pages to host it online. All of my images are located in the public folder and since I am a begginer in front-end I did not try anything funny with my compiling.

Any help would be great because not being able to preview images is quite a pain. I could not find anybody with the same issue and I'm a newbie in front-end stuff :/ Thanks in advance!

Answer 1

Ok I think I solved the issue with this question about public folder and images .

The issue came from me not explicitly saying that the images came from the public folder in the image's src and the react-router-dom seemed not to like it.

Writing <img src = {process.env.PUBLIC_URL + "/images/folder/biking.PNG"} alt = "me on a bike"/> instead of <img src = {"images/folder/biking.PNG"} alt = "me on a bike"/> solved my issue.

I still do not know why this works once deployed but not in the "npm start" preview but my problem is solved!