Html 如何使用from baseurl+filename和*ngFor显示动态图像

我的基本url是：文件名来自数据源中的api，如下所示：

[
    {
        "bid": "2",
        "bnam": "ChickenChilli",
        "adds": "nsnnsnw, nnsnsnsn",
        "pdap": "5",
        "pdp": "50",
        "rat": null,
        "covr": "screenshot_20200403-225802_1_20200404154756935600.png"
    },
    {
        "bid": "3",
        "bnam": "Fudding",
        "adds": "hhhnj, hhjj",
        "pdap": "2",
        "pdp": "60",
        "rat": "4.7",
        "covr": "screenshot_20200403-225438_20200405102523050200.png"
    }
]

我无法使用ngfor设置背景图像

<div class="product-single-content" *ngFor="let d of dataSource" (click)="listItemClick(d.name)">
                            <a>
                                <div class="product-top" style="background-image:url('http://example.com/{{d.covr}}');"> 
                                    <span><i class="fa fa-heart" aria-hidden="true"></i></span>
                                </div>
                                <div class="product-bottom">
                                    <div class="content-left">
                                        <h3>{{d.bnam}}</h3>
                                        <span>{{d.adds}}</span>
                                        <strong>₹{{d.pdap}} onwards</strong>
                                    </div>
                                    <div class="content-right" style="background:#00bcd4">
                                        <p><span>{{d.rat}}</span><b>{{d.pdp}}%</b></p>
                                    </div>
                                </div>
                            </a>
                        </div>

尝试将样式动态设置为：

<div class="product-top" [style.background]="'url(http://example.com/' + d.covr + ')'"> 
    <span><i class="fa fa-heart" aria-hidden="true"></i></span>
</div>

---

还有一件事。我如何设置屏幕的高度和宽度same@Manisha你可以使用[style.height]或者如果你有许多样式需要设置，那么你可以使用[ngStyle]={styleObject}我不能同时设置高度和宽度：@Manisha你应该可以这样做。见此：