angular - angular2 enlace de imagen onError
Me pregunto si podemos enlazar o interpolar el onError en la etiqueta de imagen usando angular2.
en el app.component.ts:
imageUrl:string;
constructor( ) {
this.imageUrl = 'graphics/placeholder.gif';
}
en el app.component.html:
<img class="img-responsive" [src]="'graphics/image-1.jpg'" onError="imageUrl"/>
El método de abajo funciona.
<img class="img-responsive" [src]="'graphics/image-1.jpg'" onError="this.src='graphics/placeholder.gif'"/>
Pero como estamos usando muchas imágenes en la aplicación y me gustaría hacer una solución dinámica sencilla, también encontré esta respuesta,
Angular 2 - Comprobar si la URL de la imagen es válida o está rota
pero por alguna razón no funciona, no sé qué estoy haciendo mal aquí
Respuesta #1
Estaba casi completo, solo que se le olvidó cambiar la imagen después del evento.
errorHandler(event) {
console.debug(event);
event.target.src = "https://cdn.browshot.com/static/images/not-found.png";
}
Aquí está el enlace
Respuesta #2
componente.ts
onImgError(event){
event.target.src = './assets/imgs/altImg.png'
//Do other stuff with the event.target
}
componente.html
<img [src]="imgUrl" (error)="onImgError($event)">
