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

【问题标题】：image is not setting as background image using angular7?图像未使用 angular7 设置为背景图像？
【发布时间】：2019-11-07 09:58:59
【问题描述】：

我有一个cards 列表，要显示在component 中。每张卡片上都有一个cover-image，其网址来自服务器，而我的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 但图像未显示。

请指出我做错了什么？

【问题讨论】：

您是否检查过显示的 URL 工作正常>
是的，我已经检查过了。它工作正常。
您是否在控制台中收到有关清理链接的特定消息？
不，我没有收到任何关于链接清理的警告

标签： angular typescript background-image

【解决方案1】：

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

尝试随机值：

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

【讨论】：

是的，你是对的。它正在工作。谢谢您的帮助。 :)
你能指导我另一件事吗？
@FahadHassanSubzwari 一定要告诉我
我想检查 row.companyId?.coverUrl 是否存在以将该 url 放在 backgorund 属性中，如果不存在则应用硬编码的 url，如 ./assets/img/abc.jpg 所以根据我的代码我该怎么做？
@FahadHassanSubzwari 你能再发一个帖子吗我很乐意帮助我正在做这种事情，我想我已经有了答案提前谢谢

【解决方案2】：

你可以试试 ngStyle

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

【讨论】：

尝试通过在某处打印 {{row.companyId.coverUrl}} 来查看您是否获得了图像 url
您看到我的问题中的附图了吗？我在检查元素中获取 url