CODEWITHSUNDEEP
reactjsimagewebdeploymentgithub-pages
ObiWan20
ObiWan20

Reputation: 21

Images will not load when deploying to github pages

I am using create-react-app to build a simple React app, however, the images will not load when I deployed the project to github pages, but they load just fine when I deploy the app using the command prompt.

I am getting this error for all images:

Failed to load resource: the server responded with a status of 404 ()

Any help would be greatly appreciated. Thank you!

Upvotes: 2

Views: 3744

Answers (3)

Iulian Stan
Iulian Stan

Reputation: 11

Even if this post is old, maybe will help other web developers or beginners. A quick fix for this problem on gh-pages is to add: ${procces.env.PUBLIC_URL} in the path of your Route, Link or img tag, before your link. Example: For homepage in Route path: ${process.env.PUBLIC_URL}/ For homepage in Link to: ${process.env.PUBLIC_URL}/home ${process.env.PUBLIC_URL}/img/image.png I learned this in Web Development Course.

Upvotes: 1

Magda
Magda

Reputation: 221

I had the same problem today. The problem is with the file path. When you deploy a project on github it is not on a http://localhost:3000 but the URL is http://YOUR_PROFILE.github.io When deploying the create-react-app to GitHub Pages in package.json add

"homepage":"http://YOUR_PROFILE.github.io/MY_APP/"

MY_APP change to your repository name. Remember to structure files to have images folder in public directory not in the src. The path to images instead of './images/photo1.jpg' or '/images/photo1.jpg'

change the path to: './MY_APP/images/photo1.jpg'

It works like a charm in my case.

Upvotes: 0

weibenfalk
weibenfalk

Reputation: 892

404 means that it cant find the image. It's probably that you have to change the filepaths. If you can, use absolute paths for the images. That way you will be sure it will work. Otherwise you have to try if it works by changing the path. For example if your images is in an image folder.

Try

/images/image1.jpg

or

./images/image1.jpg

Upvotes: 1

Related Questions