首页 > 解决方案 > 角度从 api 获取具有样式背景图像的图像

问题描述

此时我从 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>

提前致谢

标签: javascriptcssangular

解决方案


你的语法是错误的。像这样使用“style.backgroundImage”时它应该可以工作:

<section [style.backgroundImage]="'url(' + URL_OF_IMAGE + ')'"></section>

推荐阅读