Images not loading when deploying to Github pages

Question

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.

Groos

is this image available inside build folder? what I presume is the gh-pages branch serves the files inside build folder and that would be the base dir, so the image should be available inside the build folder rather than public folder – Indefensible

Yeah of course it's available on the build folder. it gets created on the build folder every time I build. – Groos

can you try body::after { background-image: url("background-img.jpg"); } ie without / – Indefensible

Nope, it failed to resolve the path. This is a relative path and Webpack tries to find it on src/ where index.css is located. thanks – Groos

Answer 1

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 😎?

Tupelo

Answer 2

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

Macaronic

Answer 3

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!

Franciscofranciska

Answer 4

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

Bantling

Answer 5

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="."

Herstein

That didnt work bruh – Cordierite

Answer 6

I think the answer by @Narcis has the most useful information, but I wanted to highlight one key point from their answer.

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

I had removed the homepage text from the variable, but still had mine set to homepage: '.'. REMOVE IT COMPLETELY.

Also, if you are here specifically because your images are not loading when you deploy your react app in AWS Amplify, this is a likely reason (especially if you've already checked your rewrites and attempted other fixes).

Quiescent

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Lodie

Answer 7

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

Asquint

Answer 8

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.

Colonic

Answer 9

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

Missend

Answer 10

In my case process.env.PUBLIC_URL works well.

<img className="logoImg" src={process.env.PUBLIC_URL+"/img/logo.svg"} title="" alt=""/>

and I add file "public/img/logo.svg".

Unsuspected

Answer 11

I now this is an old post, but the way I have delt with this is by putting my assets in the src folder and then using require() to reference the media with a relative path. This is the only way I have been able to get this to work with JSX and template literals.

Example:

const selectedIcon = arrayOfIconNames[selectedIconIndex];
<img alt='user icon' src={require(`../../../assets/icons/${selectedIcon }.png`)} />

Depriest

Answer 12

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

Groovy

Hey, thanks for answering. Yep I have done everything correctly and it works on development. The background image fails to load only on the deployed site. Finally, for the publicPath trick. I would prefer not to eject. – Groos