0

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!

Nicolas AUDEPIN
  • 51
  • 2
  • Welcome to Stackoverflow, would you mind to share some code of your component? – MWO Nov 04 '20 at 18:32
  • Hi! here is one example from my code `
    Sweet Arpegiato stuff that shows perfectly fine in the preview.
    `     – Nicolas AUDEPIN Nov 05 '20 at 22:41
  • I guess my issue come from some react-scripts parameters but I have no idea where to look at and I do not want to break it even more. :/ `"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },` – Nicolas AUDEPIN Nov 05 '20 at 22:46

1 Answers1

0

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!

Nicolas AUDEPIN
  • 51
  • 2