Búsqueda de sitios web

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)">

Artículos relacionados