Images are not loading after deploying angular app on github pages

Question

I deployed a test project on github pages using these commands:

ng build --prod --base-href https://<profile_name>.github.io/<repo_name>/
ngh --dir=dist/scrabble

Everything works fine except images (on localhost every image is loading).

---

outputPath in angular.json:

"outputPath": "dist/scrabble/",

assets in angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets"
],

assets folder with images is located in <project_folder>/src/assets

one example of image tag which works perfectly on localhost but doesn't load on github pages:

  <img src="../../../assets/scaledlogo.png" routerLink="/menu" />

Molar

Can you still serve the file in the local ? – Nessim

Answer 1

If all your images are in your assets folder you can just remove the ../s from the path.

 <img src="assets/scaledlogo.png" routerLink="/menu" />

So the issue is everything gets transpiled and minified and the assets folder is no longer 3 directories back. Angular knows where your assets folder is if you are running it locally or its deployed and does not need the relative path.

Scalariform

Answer 2

You need to pass --deploy-url option. in your case it should be

ng build --prod --base-href https://<profile_name>.github.io/<repo_name>/ --deploy-url=https://<profile_name>.github.io/<repo_name>/

Khudari

Answer 3

Remove the "../" in front and mention the path starting from the assets folder Below will solve your problem

<img src="assets/scaledlogo.png" routerLink="/menu" />

In case if you have additional folder inside the assets go on with that path. For Example:

<img src="assets/images/leave-procedure/admin1.png" width="400" height="150">

Hope this helped.

Want

Answer 4

A list of things to check:

1. Check the dist folder if the assets are there.
2. Try to update the deployed link if it works with a different path
   • If it does work, it's a problem with the path setup possibly under the configuration files like angular.json
3. Check the Network tab for any error like redirection issues
   • Most likely a redirection code in the back-end. Try changing the file name.

Wiedmann

Answer 5

See this guide section: https://angular.io/guide/deployment#deploy-to-github-pages
You need to set the base ref property: ng build --output-path docs --base-href /your_project_name/

Calumet