Изображения не загружаются после развертывания углового приложения на страницах GitHub

Question

Я развернул тестовый проект на страницах github с помощью этих команд:

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

Все отлично работает, кроме изображений (на localhost загружается каждое изображение).outputPath в angular.json:

"outputPath": "dist/scrabble/",

активов в angular.json:

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

папка ресурсов с изображениями находится в <project_folder>/src/assets

один пример изображениятег, который отлично работает на localhost, но не загружается на страницах github:

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

Answer 1

Если все ваши изображения находятся в папке ресурсов, вы можете просто удалить ../ s из пути.

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

Таким образом, проблема в том, что все передается и минимизируется, а папка ресурсов больше не имеет 3 каталогов назад. Angular знает, где находится ваша папка ресурсов, если вы используете ее локально или развернули, и ему не требуется относительный путь.

Answer 2

Вам необходимо передать параметр --deploy-url.в вашем случае это должно быть

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