[英]Angular get image from api with style background-image
此时,我从 API 获取图像并使用插值将其打印到视图:
<img src="{{url + '/get-product-image/' + product.image}}" *ngIf="product.image" class="img"/>
我的问题是:可以从 [style.background] 或类似的东西“插值”吗?。
我的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'); }
我的目标是插入 html 元素的背景图像:
<section id="banner">
<section [style.backgroundImage]="{{url + '/get-product-image/' + product.image}}"></section>
提前致谢
ur 语法错误。 它应该在使用“style.backgroundImage”时工作,如下所示:
<section [style.backgroundImage]="'url(' + URL_OF_IMAGE + ')'"></section>
您可以使用以下方法实现此目的:
<div style="height:300px;width:300px;" [ngStyle]="{'background': 'url(' + imgURL + ') no-repeat 0 0 / cover'}" class="flex-center">
</div>
这是 stackBlitz 链接: 演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.