Question

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

问题：

我想用/assets/images/2.jpg等动态变量替换图片网址{{ article.uri }}。

我尝试了以下几种方法参考：

Attribute property binding for background-image url in Angular 2

How to add background-image using 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。

Answer 1

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>

Answer 2

如果您从远程来源或用户输入获取背景图片，则需要angular sanitize the url。在您的组件中，您将需要添加以下代码...

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>

并在您附加到div的某些课程中应用no-repeat 0px 0px;。

Answer 3

正确答案是[style.background-image]="'url(' + article.uri + ')'"

但是如果您将 ngFor 用于轮播，请确保您已正确添加类“活动” 。

此代码将不有效：

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

您应该仅将'active'类用于第一项！

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

希望可以为某人节省时间

Answer 4

您可以通过在单个变量中添加url路径来使用它。例如

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

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

Answer 5

为Angular 8工作：在组件中，定义ngStyle对象var（此处称为样式，在构造函数中初始化）：

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

在模板中，将其分配为ngStyle

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

Answer 6

这对我来说很好用：

js文件：

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

<强>数组：

string[] = [this.path];

和HTML文件：

<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">

Answer 7

要解决此问题，正确的语法是

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

如果有帮助，请标记答案。

如何在Angular 4中使用ngStyle作为后台URL

7 个答案: