如何使用 *ngFor 从 baseurl+filename 显示动态图像

玛尼莎

我有我的基本 url 说：http : //www.example.com和文件名来自 api，它位于 dataSource 中，如下所示：

[
    {
        "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>

阿西什·兰詹

尝试使用style动态设置为：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。