首页 > 解决方案 > 图像未使用 angular7 设置为背景图像?

问题描述

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

<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 但图像未显示。

在此处输入图像描述

请找出我做错了什么的错误?

标签: angulartypescriptbackground-image

解决方案


我会尝试为我的 div 添加一些高度和宽度

尝试使用随机值:

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

推荐阅读