如何在Angular 4中使用ngStyle作为背景网址

Posted 2023-02-22

【中文标题】如何在Angular 4中使用ngStyle作为背景网址

【英文标题】：How to use ngStyle for background url in Angular 4

【发布时间】：2017-11-23 02:52:56

【问题描述】：

我有以下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>

问题：

我想用 article.uri 之类的动态变量替换图片网址/assets/images/2.jpg。

我从下面的参考中尝试了几种方法：

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。

【问题讨论】：

"background-url" 不存在，至少现在不存在了。

【参考方案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>

【参考方案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;。

【讨论】：

但是为什么 style.background-image 是 background-url 呢？ no-repeat 0px 0px; 也适用于 url 属性，如果是 image 那么它应该应用于哪些属性？

background-url 不是我所知道的 CSS 属性（如果你向下滚动一点，你可以看到所有的 background types here）

错过了下半场，你只能有一个有background: no-repeat 0px 0px;的类

【参考方案3】：

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

但如果您使用 ngFor 进行轮播，请确保您已正确添加类 'active'。

此代码将不工作：

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

【参考方案4】：

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

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

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

【参考方案5】：

为 Angular 8+ 工作（模板文字的力量）： 在组件中，定义 ngStyle 对象 var（这里称为样式，在构造函数中初始化）：

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

在模板中，将其指定为 ngStyle

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

【参考方案6】：

在我的例子中，以下语法有效：

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

离子 CLI：6.16.3

【参考方案7】：

这对我来说很好用：

js文件：

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

数组：

string[] = [this.path];

和 HTML 文件：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【参考方案8】：

为了解决这个问题，正确的语法是

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

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

【讨论】：

没有发生

ng-style 属性？您是否提供 AngularJS/Angular 1 答案？

适用于 Angular 1，而不是 Angular 4。问候