如何替换 Angular 中属性样式背景图像中给出的损坏图像 URL？

Question

<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

Answer 1

span tag is inline-block element, so you need change display and set width & height for it. for example if use p tag, you didn't need add display: block; .

Try like this:

<span style="background:url('{{ item.imgUrl }}');display:block; height:100vh; width:100vw; background-repeat: no-repeat"></span>

snippet:

 <span style="background:url('https://picsum.photos/200/300');display:block; height:100vh; width:100vw; background-repeat: no-repeat"></span>

Answer 2

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