如何在Angular 4中使用ngStyle作为背景URL [英] How to use ngStyle for background url in Angular 4
本文介绍了如何在Angular 4中使用ngStyle作为背景URL的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在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
.
I want to replace image url /assets/images/2.jpg
with dynamic variable like {{ article.uri }}
.
我从以下参考资料中尝试了几种方法:
I tried with several way from below ref:
如何使用ngStyle(angular2)添加背景图像?/a>
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.
I am using Angular 4.1.3.
推荐答案
background-url
是不正确的CSS,请改用background
或background-image
.
background-url
is incorrect CSS, use background
or background-image
instead.
以下是正确语法的示例:
Here is an example of correct syntax:
<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>
这篇关于如何在Angular 4中使用ngStyle作为背景URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文