изображение не устанавливается как фоновое изображение с помощью angular7? - PullRequest
Новая
       13

изображение не устанавливается как фоновое изображение с помощью angular7?

0 голосов
/ 07 ноября 2019

У меня есть список 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>

. Вот как я получаю URL в моем html. Я прилагаю chrome inspect element результат, чтобы показать, что в html я получаю URL, но изображение не отображается.

enter image description here

Пожалуйста, укажите ошибку, что яя делаю не так?

Ответы [ 2 ]

1 голос
/ 07 ноября 2019

Я бы попробовал добавить немного высоты и ширины к моему div

, попробуйте со случайными значениями: 

.img-area{
  height:50px;
  width:50px;
}
0 голосов
/ 07 ноября 2019

Можете ли вы попробовать с ngStyle 

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