<img [src]="item.imgUrl" (error)="pictNotLoading($event)" alt="" />
pictNotLoading(event) {
event.target.src = '/assets/dynamic_images/medvibe_partner.png';
}
the above criteria will replace broken images. In my products listing page, I've decided to set background-image dynamically for each product item (as like hover effect).
<span class="product_thumbnail_hover" style="background-image:url('{{item.imgUrl}}');"></span>
But somehow I'm getting a bunch of broken image URLs from api call. So, my question is how to replace a broken image url given in style background-image
<ng-template [ngIf]="item.imgUrl != null || item.imgUrl != undefined">
<span class="product_thumbnail_hover" [ngStyle]="{'background-image': item.imgUrl ? 'url(' + item.imgUrl + ')' : 'url(' + '/assets/dynamic_images/prod_preview.png' + ')'}"></span>
</ng-template>
Above code resolved my issue temporarily. I don't know is this a good or worst method. think this might helps.