CODEWITHSUNDEEP
angularimagegithubdeploymentgithub-pages
hdw3
hdw3

Reputation: 951

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

Upvotes: 7

Views: 10976

Answers (5)

DanGo
DanGo

Reputation: 429

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.

Upvotes: 20

Fix
Fix

Reputation: 41

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/

Upvotes: 0

ランス
ランス

Reputation: 541

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.

Upvotes: 0

Niroshan Ratnayake
Niroshan Ratnayake

Reputation: 3801

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.

Upvotes: 0

Ravin Singh D
Ravin Singh D

Reputation: 893

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

Upvotes: 3

Related Questions