angular2 onError图像绑定

时间:2017-02-09 11:17:49

标签: angular typescript

我想知道我们是否可以使用angular2绑定或插入图像标记上的onError,

app.component.ts上的

imageUrl:string;

  constructor( ) {
      this.imageUrl = 'graphics/placeholder.gif';
   }
app.component.html上的

<img class="img-responsive" [src]="'graphics/image-1.jpg'" onError="imageUrl"/>

以下方法有效。

<img class="img-responsive" [src]="'graphics/image-1.jpg'" onError="this.src='graphics/placeholder.gif'"/>

但是当我们在应用程序上使用许多图像时,我想将其作为一个简单的动态解决方案,我也找到了这个答案,

Angular 2 - Check if image url is valid or broken

但由于某种原因不起作用,我不知道我在这里做错了什么

2 个答案:

答案 0 :(得分:13)

几乎完成了他只是忘了在活动结束后改变图像。

errorHandler(event) {
   console.debug(event);
   event.target.src = "https://cdn.browshot.com/static/images/not-found.png";
}

这是 link

答案 1 :(得分:7)

component.ts

onImgError(event){
 event.target.src = './assets/imgs/altImg.png'
//Do other stuff with the event.target
}

component.html

 <img [src]="imgUrl" (error)="onImgError($event)">