What Is the Recommended Way to Dynamically Set Background Image in Angular 4

How to set Angular 4 background image?

You can use ngStyle to set background for a div

<div [ngStyle]="{background-image: 'url(./images/' + trls.img + ')'}"></div>

or you can also use built in background style:

<div [style.background-image]="'url(/images/' + trls.img + ')'"></div>

Angular dynamic background images

Use instead

<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>

or

<div [style.background]="'url(/img/' + item.img + ')'"
    [style.width.px]="200" [style.height.px]="150p"></div>

See also In RC.1 some styles can't be added using binding syntax

Angular dynamic background image in div

if you want use dynamically. Dont use this syntactic

<div class="thumb" style="background-image: url('https://www.abcd.com/+ post.image)"></div> 

try do this

<div class="thumb" [ngStyle]="{'background-image': 'url(' + post.imageURL + ')'}" > <div>

Hope this will be helpful.

How to set background-image URL dynamically when using *ngfor

as @ninecraft suggested in his comment .. this answer gave me the solution

[style.background-image]="'url('+for.item_image_1+')'" worked but it didn't resize the image that is why i thought it wasnt working,, i needed to use [style.background-size]="'100% 350px'" to resize the image and it worked perfectly.

Angular style: add dynamically a background-image with an overlay

Follow on from my comment: Calling functions from the template will cause the change detector to loop through the function dozens of times - use ngOnInit or ngAfterViewInit and set a public property on the component instead, and then bind to that

Use the following ngStyle approach in the template to avoid the url sanitization problems without the hassle

[ngStyle]="{
                'background-image': (chosenImage) ? 'url(' + chosenImage + ')' : ''         
            }"

Dynamically set image or html as Background in Angular 4 Component

Here is finally the solution:

export class HomeBackgroundComponent {
public backgroundPath$: Observable<string>;
public isHtml$ = new Observable<boolean>();
public htmlFile$ = new Observable<string>();

constructor(public viewContext: ViewContextService, private vlmService: VlmService, private http: Http) {
    viewContext.title = 'Home';
    viewContext.id = 'HomeBackgroundComponent';

    this.backgroundPath$ = vlmService.background$.map(background => {
        return '../../../assets/customize/' + background;
    });

    this.isHtml$ = this.backgroundPath$.map(path => path.endsWith('.html'));

    this.htmlFile$ = this.backgroundPath$
        .filter(path => path.endsWith('.html'))
        .switchMap(path => {
            return this.http.get(path).map(response => response.text());
        });
}
}

How to use ngStyle for background url in Angular 4

background-url is incorrect CSS, use background or background-image instead.

Here is an example of correct syntax:

<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div>

Your full example would look like this:

<li *ngFor="let article of arr; let i=index;" >
   <div *ngIf="i == 0" 
         class="w3l_banner_nav_right_banner" 
         [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" >
     <h3> Make your <span>food</span> with Spicy. </h3>
            <div class="more">
                <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now1</a>
            </div>
    </div>
</li>

---

Related Topics