CODEWITHSUNDEEP
cssangular
Rahul Dagli
Rahul Dagli

Reputation: 4502

What is the recommended way to dynamically set background image in Angular 4

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.

Upvotes: 4

Views: 7826

Answers (5)

Mukki
Mukki

Reputation: 1

Html - <div [style.background]="background">

TS - this.section = 'assets/images/bg/waterfallsvg.svg'; this.background = (url(${this.section}) no-repeat);

Upvotes: 0

Hassan Ali
Hassan Ali

Reputation: 1029

This is the best and easy wasy to handle

[ngStyle]="{'background': 'url(' +(user.photo ? user.photo : '')+') no-repeat 0 0 / cover'}"

Upvotes: 0

Lorenzo Mengoni
Lorenzo Mengoni

Reputation: 31

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%;

Upvotes: 1

Anish K.
Anish K.

Reputation: 2532

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`);

Upvotes: 3

Harsha Basnayake
Harsha Basnayake

Reputation: 4855

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

Upvotes: 0

Related Questions