10

I have below html:

  <li>
    <div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;">
        <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 now</a>
            </div>
    </div>
</li>

Problem:

I want to replace image url /assets/images/2.jpg with dynamic variable like {{ article.uri }}.

I tried with several way from below ref:

Attribute property binding for background-image url in Angular 2

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

Tried so far:

<li *ngFor="let article of arr;let i=index;">
   <div  *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;">
     <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>

I am using Angular 4.1.3.

piet.t
  • 11,718
  • 21
  • 43
  • 52
Hiranya Sarma
  • 1,454
  • 4
  • 15
  • 25

8 Answers8

17

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>
Fredrik Lundin
  • 8,006
  • 1
  • 29
  • 35
12

If you're getting your background image from a remote source or a user input you will need to have angular sanitize the url. In your component you will want to add the following bits of code...

import { DomSanitizer } from '@angular/platform-browser';

export class YourComponent {
  constructor(private _sanitizer: DomSanitizer) { }

  public sanitizeImage(image: string) {
    return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
  }
}

Try setting your HTML to this...

<li *ngFor="let article of arr;let i=index;">
   <div  *ngIf="i == 0" class="w3l_banner_nav_right_banner" [style.background-image]="sanitizeImage(article.uri)">
     <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>

And apply the no-repeat 0px 0px; in some class you attach to the div.

MichaelSolati
  • 2,847
  • 1
  • 17
  • 29
  • but why `style.background-image` as it was `background-url` ? also `no-repeat 0px 0px;` was for `url` properties,if it is `image` then for which properties it should be applied? – Hiranya Sarma Jun 20 '17 at 14:25
  • `background-url` isn't a CSS property from what I've known (if you scroll down a little you can see all the [background types here](https://www.w3schools.com/cssref/css3_pr_background.asp)) – MichaelSolati Jun 20 '17 at 14:28
  • 1
    Missed the second half, you can just have a class that has `background: no-repeat 0px 0px;` – MichaelSolati Jun 21 '17 at 04:44
1

The correct answer is [style.background-image]="'url(' + article.uri + ')'"

but if you are using ngFor for carousel, make sure you have added class 'active' properly.

This code will NOT working:

    <div class="carousel-item active"
        *ngFor="let article of arr;"
        [style.background-image]="'url(' + article.uri + ')'"></div>

You should use 'active' class for first item only!

    <div class="carousel-item" 
        *ngFor="let article of arr; let i = index;"
        [ngClass]="{'active': i === 0}"
        [style.background-image]="'url(' + article.uri + ')'"></div>
Dmitry Grinko
  • 13,806
  • 14
  • 62
  • 86
0

you can use it by adding url path in a single variable. for example

bgImageVariable="www.domain.com/path/img.jpg";

[ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}"
Coder Girl
  • 175
  • 1
  • 7
0

Working for Angular 8+ (Power of template literals): In component, define ngStyle object var (here called as styles, initialised in constructor):

const bgImageUrl = 'assets/images/dot-grid.png'
const styles = {
  backgroundImage: `url(${bgImageUrl})`
};

In template, assign this as ngStyle

<div [ngStyle]="styles"><!-- your content --></div>
Shubhashish Verma
  • 29
  • 4
0

In my case the following syntax worked:

<ion-slide *ngFor="let page of pages">
    <div class="cardImage" style.background-image="url('{{ page.imageUrl }}')"></div>
</ion-slide>

Ionic CLI : 6.16.3

Nasenbaer
  • 4,810
  • 11
  • 53
  • 86
-2

This works fine for me:

js file:

path = 'url(../assets/about.png)';

array:

string[] = [this.path];

and HTML file:

<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">
Mr_Pouet
  • 4,061
  • 8
  • 36
  • 47
Jiahui Chen
  • 1
  • 1
  • 1
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – rollstuhlfahrer Feb 21 '18 at 07:20
-3

To solve this, the correct syntax is

<div class="modalContainer" 
  ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">

Mark answer if it helps.

Mohan Srinivas
  • 302
  • 3
  • 13