path to background-image in css with specific base href in Angular 9

Question

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?

BADAOUI Mohamed · Accepted Answer · 2020-05-30 16:53:30Z

12

There were some issues with i18n building angular app and base href.

It should work with that syntax for scss files:

background-image: url('~src/assets/img/background.jpg');

Hope this helps.

edited May 30, 2020 at 16:53

answered May 30, 2020 at 12:32

BADAOUI Mohamed

2,2341 gold badge18 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mick Over a year ago

This copies the asset files in the root folder for some reason so they get deployed twice

tuffant21 Over a year ago

I almost gave up trying to figure this out. Thank you sir 🫡

jcdsr · Accepted Answer · 2021-07-30 16:10:07Z

-1

Works for me in package.json add this to your command

--base-href ../ --deploy-url ../

or

--base-href ' ' --deploy-url ' '

CSS if loads an asset:

background-image: url('/assets/graphics/image.svg')

on index.html 1st line as <base href="/">

Double-check in angular.json - "projects"

  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",

edited Jul 30, 2021 at 16:10

answered Jul 30, 2021 at 15:37

jcdsr

1,1691 gold badge17 silver badges36 bronze badges

1 Comment

jcdsr Over a year ago

however, this is not a perfect solution

Collectives™ on Stack Overflow

path to background-image in css with specific base href in Angular 9

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related