web-dev-qa-db-ja.com

Angular 4の背景URLにngStyleを使用する方法

私は以下の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>

問題：

画像のURL /assets/images/2.jpgを{{ article.uri }}などの動的変数に置き換えたい。

私は以下のrefからいくつかの方法で試しました：

Angular 2 の背景画像URLの属性プロパティバインディング

ngStyle（angular2）を使用して背景画像を追加する方法？

これまでに試した：

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

私はAngular 4.1.3。

imageangular
8
Hiranya Sarma

background-urlは不正なCSSです。代わりにbackgroundまたはbackground-imageを使用してください。

正しい構文の例を次に示します。

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

完全な例は次のようになります。

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

リモートソースまたはユーザー入力から背景画像を取得する場合は、 RLをサニタイズする が必要です。コンポーネントに次のコードを追加します...

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

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

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

これにHTMLを設定してみてください...

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

そして、no-repeat 0px 0px;あるクラスでは、divにアタッチします。

7
MichaelSolati

Angular 8：コンポーネントで、ngStyleオブジェクト変数（ここではスタイルと呼ばれ、コンストラクターで初期化されます）を定義します）：

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

テンプレートで、これをngStyleとして割り当てます

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

正解は[style.background-image]="'url(' + article.uri + ')'"です

ただし、カルーセルにngForを使用している場合は、クラス'active'が適切に追加されていることを確認してください。

このコードは[〜＃〜] not [〜＃〜]動作します：

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

'active' class first itemのみを使用する必要があります！

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

それが誰かの時間を節約することを願っています

0
Dmitry Grinko

単一の変数にURLパスを追加することで使用できます。例えば

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

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