Attribute Property Binding for Background-Image Url in Angular 2

Attribute property binding for background-image url in Angular 2

I think that you should use something like that:

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

where image is a property of your component.

See this question:

• How to add background-image using ngStyle (angular2)?

angular style.background-image binding

This method of applying style is know as applying the style using attribute binding and Angular itself parses this. In Angular we normally bind the component properties in our template, but we can bind attributes too in our template.

Here background-image is an attribute of style which is getting bound to cover property of the track object.

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.

How to add background-image using ngStyle (angular2)?

I think you could try this:

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

From reading your ngStyle expression, I guess that you missed some "'"...

property binding to style

This is most likely due to Angular's built-in features to prevent cross-site scripting. See this link: https://angular.io/guide/security#xss

UPDATE

I was able to make it work with syntax like this:

<div class="row" [ngStyle]="{'background-image': 'url(' + imageUrl + ')'}">

This uses the ngStyle attribute which is "safe" instead of the style attribute.

This is what yours would need to look like:

<div class="row" [ngStyle]="{'background-image': 'url(' + room.image[0] + ')'}">

The syntax to the right of the colon (:) is basically building up a string, so you need to add "+" to concatenate the style text (such as 'url') and the value from the component property.

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