logo标签列表

如何在Angular 4中使用ngStyle设置背景图片的URL

imageangular
10

我有以下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 }} 替换图片的URL地址 /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" 不存在，至少不再存在。 - Jack Connor
8个回答
17

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

如果您从远程源或用户输入获取背景图片，则需要使用Angular来清理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>

将no-repeat 0px 0px;应用于您附加到div的某个类中。

但是为什么style.background-image变成了background-url？而且no-repeat 0px 0px;是用于url属性的，如果是image，那么应该应用于哪些属性呢？ - Hiranya Sarma
据我所知，background-url不是CSS属性（如果您向下滚动一点，您可以在此处查看所有背景类型）。 - MichaelSolati
1
错过了后半部分，你可以创建一个类，其中包含 background: no-repeat 0px 0px;。 - MichaelSolati
1

正确答案是[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>
0
在我的情况下，以下语法有效：
<ion-slide *ngFor="let page of pages">
    <div class="cardImage" style.background-image="url('{{ page.imageUrl }}')"></div>
</ion-slide>

Ionic CLI: 6.16.3

（Ionic CLI：6.16.3）
0

你可以通过将URL路径添加到单个变量中来使用它。 例如

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

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

适用于Angular 8+（模板文字的强大功能）： 在组件中，定义ngStyle对象变量（此处称为styles，在构造函数中初始化）：

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

在模板中，将其分配为 ngStyle

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

这对我来说很好用:

JS文件：

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

数组：

string[] = [this.path];

以及 HTML 文件：

<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">
1
虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - rollstuhlfahrer
-3
为了解决这个问题，正确的语法是：
<div class="modalContainer" 
  ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">

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

它没有发生。 - Hiranya Sarma
1
ng-style 属性？您是提供 AngularJS / Angular 1 的答案吗？ - MichaelSolati
这是针对Angular 1而不是Angular 4的。 祝好。 - ale
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接