Развертывание моего приложения angular 8 на страницах github: изображения (файлы ресурсов) не отображаются

Question

У меня есть приложение angular 8, и я пытаюсь развернуть его на страницах github , следующих за этим и этим учебным пособием. Итак, я пришел с этой командой:

ng build --prod --base-href [personal-url] &&  ngh --dir=dist/personalsite

Все работает нормально, если изображения не появляются. Браузер выдает ошибки в консоль, указывая, что изображения не существуют.

У меня есть изображения под src/assets/images, а в html я импортирую вот так:

<div class="image">
     <img src="../../assets/images/profile-image.jfif" />
</div>

Кто-нибудь знает, что я делаю не так?

Answer 1

Я обнаружил здесь , что я должен определить путь к изображению следующим образом:

<img src="./assets/images/profile-image.jfif" />

Причина в том, что ng build копирует папку ресурсов в root папка dist/personalsite. Содержимое dist/personalsite загружается на страницы GitHub, что означает, что папка assets будет доступна на root страниц Github.