图像未使用 angular7 设置为背景图像？

Question

我有一个 cards 的列表要显示在 component 中。在每张卡上都有一个 cover-image 其 url 来自服务器并且在我的 component.html 中有一个 ngFor 像这样

<div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img-area">
</div>
<div class="card-content-area">
   <p class="card-title cursor-pointer" (click)="navigateToCOmpany(row)">{{row.companyId.name}}</p>
   <div class="card-description-area">
      <p class="site-text">{{row.offer_desc}}</p>
   </div>
        <a (click)="referralClick(row, i)" class="site-btn show-desktop-block">Get referral link</a>
        <a (click)="referralClick(row, i)" class="site-link-mobile show-mobile-block"><i class="fa fa-link mobile-link" aria-hidden="true"></i> Get Referral link</a>
</div>

这是我在 html 中获得 url 的方法。我附上 chrome inspect element 结果以表明在 html 中我得到 url 但图像未显示。

请指出我做错了什么？

Answer 1

你能用 ngStyle 试试吗

<div [ngStyle]="{'background-image': 'url(' + row.companyId?.coverUrl + ')'}" class="img-area">

Answer 2

我会尝试为我的 div

添加一些高度和宽度

尝试使用随机值：

.img-area{
  height:50px;
  width:50px;
}

图像未使用 angular7 设置为背景图像？

image is not setting as background image using angular7?

background-image

typescript

angular