At this time i get an image from an API and print it to the view with interpolation:
<img src="{{url + '/get-product-image/' + product.image}}" *ngIf="product.image" class="img"/>
My question is: It's posible to 'interpolate' from [style.background] or something like this?.
My css:
#banner{ background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)), url('https://images.unsplash.com/photo-1460306855393-0410f61241c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80'); }
My goal is to interpolate the background-image of a html element:
<section id="banner">
<section [style.backgroundImage]="{{url + '/get-product-image/' + product.image}}"></section>
Thanks in advance
Ur syntax is wrong. It should work when using "style.backgroundImage" like this:
<section [style.backgroundImage]="'url(' + URL_OF_IMAGE + ')'"></section>
You can achieve this using below :
<div style="height:300px;width:300px;" [ngStyle]="{'background': 'url(' + imgURL + ') no-repeat 0 0 / cover'}" class="flex-center">
</div>
Here is the stackBlitz link : demo
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.