web-dev-qa-db-fra.com

Comment utiliser ngStyle pour l'URL de fond dans Angular 4

J'ai ci-dessous 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>

Problème:

Je veux remplacer l'URL de l'image /assets/images/2.jpg par une variable dynamique telle que {{ article.uri }}.

J'ai essayé avec plusieurs moyens d'en bas ref:

Liaison de propriété d'attribut pour l'URL de l'image d'arrière-plan dans Angular 2

Comment ajouter une image de fond avec ngStyle (angular2)?

Essayé jusqu'ici:

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

J'utilise Angular 4.1.3.

imageangular
7
Hiranya Sarma

background-url est un CSS incorrect, utilisez plutôt background ou background-image.

Voici un exemple de syntaxe correcte:

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

Votre exemple complet ressemblerait à ceci:

<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>
12
Fredrik Lundin

Si vous obtenez votre image d'arrière-plan à partir d'une source distante ou d'une entrée utilisateur, vous devez assainir angular l'url . Dans votre composant, vous voudrez ajouter les bits de code suivants ...

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

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

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

Essayez de définir votre code HTML pour cela ...

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

Et appliquez le no-repeat 0px 0px; dans une classe que vous attachez au div.

7
MichaelSolati

La bonne réponse est [style.background-image]="'url(' + article.uri + ')'"

mais si vous utilisez ngFor pour carrousel, assurez-vous d’avoir correctement ajouté class 'active'  

Ce code seraPASfonctionne:

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

Vous devez utiliser 'actif' classe pour le premier élément seulement!

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

J'espère que cela fait gagner du temps à quelqu'un

0
Dmitry Grinko

vous pouvez l'utiliser en ajoutant le chemin de l'URL dans une seule variable . par exemple

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

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