私は以下の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。
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>
リモートソースまたはユーザー入力から背景画像を取得する場合は、 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にアタッチします。
Angular 8:コンポーネントで、ngStyleオブジェクト変数(ここではスタイルと呼ばれ、コンストラクターで初期化されます)を定義します):
let bgImageUrl = 'assets/images/dot-grid.png'
let styles = {
backgroundImage: `url(${bgImageUrl})`
};
テンプレートで、これをngStyleとして割り当てます
<div [ngStyle]="styles"><!-- your content --></div>
正解は[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>
それが誰かの時間を節約することを願っています
単一の変数にURLパスを追加することで使用できます。例えば
bgImageVariable="www.domain.com/path/img.jpg";
[ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}"