image is not setting as background image using angular7?

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.

Please identify the mistake that what i am doing wrong?

do you get a specific message in your console about sanitizing a link? — JSmith, Nov 07 '19 at 01:56
No, i am not getting any kind of warning regarding link sanitizing — Fahad Subzwari, Nov 07 '19 at 01:58

score 1 · Accepted Answer · answered Nov 07 '19 at 01:58

1

I would try add some height and width to my div

try with random values:

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

answered Nov 07 '19 at 01:58

JSmith

4,519
4
29
45

yes you are right. It's working. Thanks for the help. :) – Fahad Subzwari Nov 07 '19 at 02:01
can you guide me about one another thing? – Fahad Subzwari Nov 07 '19 at 02:18
@FahadHassanSubzwari sure tell me – JSmith Nov 07 '19 at 02:19
I want to check if `row.companyId?.coverUrl` is exist to put that url in the backgorund property and if not exist so apply hard coded url like `./assets/img/abc.jpg` so according to my code how can i do that? – Fahad Subzwari Nov 07 '19 at 02:21
@FahadHassanSubzwari can you make another post I will happy to help I'm just working on this kind of thing and I think I have the answer thanks in advance – JSmith Nov 07 '19 at 02:22
i have posted a new question. Please respond on that. here is the url of that question https://stackoverflow.com/questions/58741176/how-can-i-check-if-else-condition-in-ngstyle-background-property-using-angular7 – Fahad Subzwari Nov 07 '19 at 02:36

score 0 · Answer 2 · answered Nov 07 '19 at 01:24

0

Can you try with ngStyle

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

answered Nov 07 '19 at 01:24

Sajeetharan

216,225
63
350
396

try to see if you are getting the imag url by printing somewhere {{row.companyId.coverUrl}} – Sajeetharan Nov 07 '19 at 01:26
did you see the attached picture in my question? i am getting url in inspect element – Fahad Subzwari Nov 07 '19 at 01:27

image is not setting as background image using angular7?

2 Answers2