Изображение не загружается после «сборки» в angular8

Question

Проблема в том, что путь к изображению, расположенному в папке "assets", не загружается после ng build.

Я запускаю ng build после изменения пути на <base href="/skstose/"> из index.html.

Среда разработки означает ng serve.Среда Prod означает ng build после компиляции.

1) Следующая проблема находится в среде разработчика: -

Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError:
Can't resolve 'assets/images/skistose/kgExtract.png' in 'E:\Workspace\skistose\src\app\skistose-kg-extract'

> 2 |   background: url("assets/images/skillStore/kgExtract.png") no-repeat;
                    ^

2) Следующая проблема находится в среде Prod: -

.css

.bg{
    background: url(/assets/images/skillStore/kgExtract.png) no-repeat
}

работает в dev environement, но не в prod environment.

.css

.bg{
    background: url(assets/images/skillStore/kgExtract.png) no-repeat
   }

работает в prod environment, ноне в dev environment.

Однако <img src="assets/images/skillStore/uploadFile.png"> отлично работает как в dev environment, так и в 'prod environment'.

В среде разработчика,

 <base href="/">

В сборке продукта: -

 <base href="/skstose/">

Answer 1

Не редактировать в индексе HTML;

для построения в URL, попробуйте этот код: -

ng build --prod --base-href = '/ skstose /'

URL-ссылка будет открыта вот так 'http:/test.com/skstose'

Вот ресурсы: - https://angular.io/guide/deployment

Answer 2

Как предложено rajhim , вам необходимо установить href при сборке с параметром href.Хотя то, что вы делали вместо этого, может иметь эффект, проблема в том, как вы предоставляете URL ресурса.

Вы можете попробовать это:

background: url(~src/assets/images/skillStore/kgExtract.png) no-repeat

Answer 3

Получаете ли вы папку assets после ng build в папке dist?

если не попробуете с ng build --prod и отметьте