angular2 onError 이미지 바인딩

angular2 onError 이미지 바인딩

angular2를 사용하여 이미지 태그의 onError를 바인딩하거나 보간할 수 있는지 궁금합니다.

app.component.ts:

imageUrl:string;

  constructor( ) {
      this.imageUrl = 'graphics/placeholder.gif';
   }

app.component.vmdk:

<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 - 이미지 URL이 유효하거나 손상되었는지 확인합니다.

하지만 어떤 이유로 작동하지 않습니다. 제가 여기서 무엇을 잘못하고 있는지 모르겠습니다.

그것은 거의 완성되었습니다. 그는 단지 행사 후에 이미지를 바꾸는 것을 잊었습니다.

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

여기 링크가 있습니다.

구성 요소.ts

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

구성요소.구성요소

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

언급URL : https://stackoverflow.com/questions/42135268/angular2-onerror-image-binding