Изображения не загружаются после развертывания углового приложения на страницах github
Я развернул тестовый проект на страницах github, используя следующие команды:
ng build --prod --base-href https://<profile_name>.github.io/<repo_name>/
ngh --dir=dist/scrabble
Все работает нормально, кроме изображений (на локальном хосте загружается каждое изображение).
outputPath in angular.json:
"outputPath": "dist/scrabble/",
активы в angular.json:
"assets": [
"src/favicon.ico",
"src/assets"
],
папка с изображениями находится в <project_folder>/src/assets
один пример тега изображения, который отлично работает на локальном хосте, но не загружается на страницах github:
<img src = "../../../assets/scaledlogo.png" routerLink = "/menu" />
@TonyNgo Я не знаю, что это значит
Ответы 4
Вам нужно передать опцию --deploy-url. в вашем случае должно быть
ng build --prod --base-href https://<profile_name>.github.io/<repo_name>/ --deploy-url=https://<profile_name>.github.io/<repo_name>/
Если все ваши изображения находятся в папке с ресурсами, вы можете просто удалить ../s из пути.
<img src = "assets/scaledlogo.png" routerLink = "/menu" />
Таким образом, проблема в том, что все транспилируется и минимизируется, а папка с ресурсами больше не находится в трех каталогах назад. Angular знает, где находится ваша папка с ресурсами, если вы запускаете ее локально или развертываете, и ему не нужен относительный путь.
Удалите «../» впереди и укажите путь, начинающийся с папки с ресурсами. Ниже решит вашу проблему
<img src = "assets/scaledlogo.png" routerLink = "/menu" />
Если у вас есть дополнительная папка внутри ресурсов, продолжайте по этому пути. Например:
<img src = "assets/images/leave-procedure/admin1.png" width = "400" height = "150">
Надеюсь, это помогло.
Список вещей, которые нужно проверить:
- Проверьте папку dist, если там есть активы.
- Попробуйте обновить развернутую ссылку, если она работает с другим путем.
- Если это работает, это проблема с настройкой пути, возможно, в файлах конфигурации, таких как angular.json.
- Проверьте вкладку «Сеть» на наличие ошибок, таких как проблемы с перенаправлением.
- Скорее всего код перенаправления в бэкенде. Попробуйте изменить имя файла.
Можете ли вы по-прежнему обслуживать файл локально?