Question: i have a list of `cards` to be displayed in a `component`. On each card there is a `cover-image` whose url is coming from server and there is a `ngFor` in my `component.html` like this

```
<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>

```

Here is how i am getting url in my html. I am attaching `chrome inspect element` result to show that in html i am getting url but image is not displaying.

[![enter image description here](https://i.stack.imgur.com/laKjj.png)](https://i.stack.imgur.com/laKjj.png)

Please identify the mistake that what i am doing wrong?

Answer: 
I would try add some height and width to my div

try with random values:

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

```
Can you try with ngStyle

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

```