[SOLVED] Images are not loading after deploying angular app on github pages

Images are not loading after deploying angular app on github pages

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" />

Solution

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.