'Images not loading when deploying to Github pages

I am using create-react-app to develop my react app and deploy it to Github pages. My app works correctly on development. But when I deploy, it successfully deploys but the background image failed to load.

loading background image in a index.css file:

body::after {
  background-image: url("/background-img.jpg");
}

The homepage on package.json

{
  "homepage": "http://bigfanjs.github.io/my-repo/",
}

Background image on app directory:

| build
    | background-img.jpg
| src
| public
    | background-img.jpg

And on the console:

GET https://bigfanjs.github.io/background-img.jpg 404 ()

Finally when I edit the URL on developer tools to url(/my-repo/background-img.jpg) it loads.

reactjs create-react-app

Solution 1:^[1]

I had this problem and I solved it by explicitly importing the image file(s) in whatever .js file you are using the image.

So if your relative path was './images/chess.png', you could import it using import chess from './images/chess.png'

See this link for more information: https://create-react-app.dev/docs/adding-images-fonts-and-files

Solution 2:^[2]

I had a similar problem but my was on local server, after gh-pages setting up, images does not appear.

All that caused by package.json homepage property.

Screenshot when homepage proporty is removed.

Screenshot when home page property is present.

To resolve this issue just create .env file in the project root folder and add the following in it:

PUBLIC_URL="."

Solution 3:^[3]

Note: In most cases, the issue pops up because we set the homepage key in our package.json file for purpose of deploying to GitHub Pages in doing so relative path setting got disturb ?

Let look at this: Although we have the image in our public folder as shown below, but it's not displaying on site:

Solution ?

Just place a GitHub repo name in front of the image as relative path, so you could be able to view not in your local as well once you deploy to GitHub pages ?. Ins't it cools ??

Solution 4:^[4]

Alright, so this is for those who, like me, have struggled with this issue, and have tried to find a good answer. Here it is (it's a record for me as well to remember):

First, make all of the image paths relative, by putting a "." in front of it. For example:

<img src={"./images/logo.svg"}/>

This particular image lived in the 'public/images/ folder of my project.

Second, create a .env file in the root folder, and copy this:

PUBLIC_URL=.

Make sure that you do not have any quotes around the dot - that made it not work for me in the beginning.

Third, make sure that you DO NOT have the homepage variable in the package.json file.

That's it! This worked for me, after trying all sorts of solutions. I appreciate that there are other ways of doing this, but this way made it easy to deploy my react project using react-gh-pages.

Hope it helps!

Solution 5:^[5]

It may be that you lack the basename attribute in your BrowserRouter tag. Here you can find more information about the React router. BrowserRouter example:

<BrowserRouter basename="/calendar"/>
<Link to="/today"/>

You also have to keep in mind what route you are in when you call that image, you may have to leave two directories behind to call that image

Solution 6:^[6]

I had a similar problem. Just solved it by putting a period in front of all the file paths. My pictures are living in the public folder as well.

Solution 7:^[7]

I don't know if this changed recently, but I just solved this by inspecting the page where my image was on my github repo, and looking at the properties of the actual image there.

picture properties

It didn't make sense that you could just put the URI to the entire github page, but apparently just adding ?raw=true after, it worked.

Using the URI like this: https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg resulted in blank white background.

What DID work: https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg?raw=true

Solution 8:^[8]

I had the same issue and solved it, gh-pages file names are case sensitive so file.jpg will not work if its named File.jpg or file.JPG

Solution 9:^[9]

Update

You tagged create-react-app, have you followed README step by step? It should works fine.

The main reason of 404 not found is because the basepath is not match /.

Please add publicPath: /my-repo/ of output in your webpack.config.js.

Ref: https://github.com/webpack/docs/wiki/configuration#outputpublicpath

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	eracer9
Solution 2
Solution 3
Solution 4	Narcis
Solution 5	Lucas Suarez
Solution 6	Wiley Buchanan
Solution 7	user288597
Solution 8	Joe Giusti
Solution 9	Shiny

'Images not loading when deploying to Github pages

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]