What is the recommended way to dynamically set bac

问题:

Currently I'm setting the image background using inline-style.

<div [ngStyle]="{background: 'url(' + section.backgroundSrc + ') no-repeat'}">

However, I'm looking for a more cleaner approach...maybe something like dynamically setting the path in the external stylesheet through angular. However, I'm not sure how it can be done.

回答1:

You can't do it thourgh CSS files. However, you can make your current code little less verbose :

<div [style.background]="'url(' + section.backgroundSrc + ') no-repeat'"></div>

If angular throws security errors, you will have to sanitize too. So you will do something like this: in HTML file-

<div [style.background]="background"></div>

in your TS file

this.background= 
this.sanitization.bypassSecurityTrustStyle(`url(${this.section.backgroundSrc}) no-repeat`);

回答2:

This code has worked for me.

[style.backgroundImage]="'url('+MEDIA_URL +'/dir/'+data.image+')'"

MEDIA_URL is the base URL of uploaded location.

Angular CLI: 6.1.3 Angular: 6.1.2

回答3:

Thanks to Harsha Sampath. I did:

[style.backgroundImage]="'url('+urlToImage+')'"

works in Angular 8, urlToImage is a string property of component, resolved at runtime.

The other settings of background are fixed in css:

background-repeat: no-repeat;
background-position:center center;
background-size: 100% 100%;