Заполнитель для фонового изображения div в Angular 4

Question

item.imgSrc имеет URL, который требует времени для загрузки на экране. Есть ли способ добавить изображение-заполнитель или изображение по умолчанию, пока изображение item.imgSrc не будет полностью загружено?

<div class="style" *ngFor="let item of array;    
    <div  [style.backgroundImage]="url('+ item.imgSrc +')" class="image"></div>
</div>

Answer 1

В одном случае, вы можете создать директиву для установки изображения заполнителя для элемента в html.

в вашем случае вы также можете сделать следующее:

<div>
    <img src="img/placeholderDefault.jpg" ng-src="{{item.imgSrc}} "  height="150px " width="300px ">
</div>

, где при загрузке вашего реального изображения оно заменит изображение placeholderDefault.и вы можете установить базу изображений ng-src в соответствии с вашими потребностями в желаемой области.

Если ng-src не работает в угловых 2+, попробуйте

<img src="{{item.imgSrc}}">

или

<img [src]="item.imgSrc">

в этом случае объявите объект в вашей области видимости в контроллере как $scope.item={} и установите $scope.item.imgSrc="defaultImagePath", и когда ваше новое исходное изображение загрузится, замените его исходным путем к изображению.

Надеюсь, эта идея поможет вам

Answer 2

Вы можете использовать [ngStyle]="{'background-image':'url(' +imageUrl+ ')'}"