The baseHref param in angular.json is /iofrog/ + there are 7 languages defined in i18n.locales, so the final baseHref in index.html is /iofrog/en for English build.
in css file for app component I have:
background-image: url('~/assets/img/background.jpg');
This is translated by Angular 9 CLI to path /iofrog/assets/img/background.jpg, so /en/ is skipped! Is it a bug in Angular CLI?
I also tried:
background-image: url('/assets/img/background.jpg'); // not showing the image
background-image: url('./assets/img/background.jpg'); // compiler error
background-image: url('assets/img/background.jpg'); // not showing the image
I also found --rebaseRootRelativeCssUrls=true|false option but it is depreciated.
The workaround that is working is in TS:
this.backgroundImageURL = `url(${this.baseHref}assets/img/background.jpg)`;
And in HTML template:
[style.background-image]="backgroundImageURL ? backgroundImageURL : ''"
But this is not elegant and the image is loading after the html is rendered.
What is the correct solution in Angular 9?