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

【问题标题】：How to replace a broken image URL given in attribute style background-image in Angular?如何替换Angular中属性样式背景图像中给出的损坏图像URL？
【发布时间】：2022-01-06 04:50:26
【问题描述】：

<img  [src]="item.imgUrl" (error)="pictNotLoading($event)" alt="" />

pictNotLoading(event) { 
    event.target.src = '/assets/dynamic_images/medvibe_partner.png'; 
}

上述条件将替换损坏的图像。在我的产品列表页面中，我决定为每个产品项动态设置background-image（就像悬停效果一样）。

<span class="product_thumbnail_hover" style="background-image:url('{{item.imgUrl}}');"></span>

但不知何故，我从 api 调用中得到了一堆损坏的图像 URL。所以，我的问题是如何替换样式背景图像中给出的损坏的图像 url

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

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

以上代码暂时解决了我的问题。我不知道这是一个好方法还是最坏的方法。认为这可能会有所帮助。

【讨论】：