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

Question

我正在使用角度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;
  }

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

attached image

Answer 1

不要在图片上使用load和error方法，而只需使用这样的绑定

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

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