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

I have my base url say: http://www.example.com and file name is coming from api which is in dataSource like this:

[
    {
        "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>
评论
  • 念念不忘
    念念不忘 回复

    Try using setting style dynamically as :

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