CODEWITHSUNDEEP
reactjsimagehttp-status-code-404github-pagesvite
Cao Quoc Binh
Cao Quoc Binh

Reputation: 1

image 404 (not found) Github Pages Vitejs build React app not show the image

I am trying to make a simple React app with ViteJS and GitHub Pages but something is wrong with my images. I can't load them, event although I added them to assets folder. Can you help me how to fix that ?

when vite priview

vite.config.js file

that is my project, please help me https://github.com/quocbinh-npm9081/React-App-Space-tourism-website

Upvotes: 0

Views: 2603

Answers (2)

flydev
flydev

Reputation: 5674

Additionnaly, the vite doc say :

If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to '/'.

export default defineConfig(
  // base: ''
}

If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.

export default defineConfig(
  base: '/React-App-Space-tourism-website/'
}

then in your case:
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

Upvotes: 0

silentnow
silentnow

Reputation: 643

You are not referencing the correct url for your images you are using the path https://quocbinh-npm9081.github.io/assets/destination/image-titan.png where as it should be https://quocbinh-npm9081.github.io/React-App-Space-tourism-website/assets/destination/image-titan.png

Github pages deploys your site in your project sub-directory

You should build your site accordingly to be hosted in a sub-directory

Upvotes: 1

Related Questions