时间戳

首页 > 解决方案 > （加载）和（错误）在img元素angular4上被多次调用

angular - （加载）和（错误）在img元素angular4上被多次调用

问题描述

我正在使用 Angular 4 并且有一个图像标签，该标签首先应该有一个占位符，当加载图像时，图像会发生变化，但如果出现错误，则占位符图像就在那里。

这是我的代码

<img src="/assets/img/placeholder.jpg" 
 (error)="imageError($event)" 
             (load)="loadImage($event, image)"
             class="offer-img-mobile img-fluid" >



imageError(event) {
    event.target.src = '/assets/img/placeholder.jpg';
  }
  loadImage(event, image) {
    event.target.src =  image.imageurl;
  }

现在出现的问题是加载和错误被多次调用，因此图像不断在错误图像和图像加载之间切换（这会引发错误，因此它们不可见）

附加图片

标签： angular

解决方案

而不是在图像上使用load和error方法，您可以简单地使用这样的绑定

<img [src]="image.imageurl || '/assets/img/placeholder.jpg'" 
class="offer-img-mobile img-fluid" >

这将等待图像从服务器加载，同时它会显示您的占位符图像。

推荐阅读