Tengo un componente que mostrará una imagen de portada. El usuario puede cargar una imagen de portada y el componente mostrará la imagen cargada por el usuario. Si el usuario no carga una imagen, quiero mostrar una imagen predeterminada.
Si no hay una imagen cargada por el usuario, quiero devolver un error y llamar al changeSource (evento), que en teoría debería vincular una nueva URL de imagen al img src. Sin embargo, no estoy definido para event.target.src y veo un espacio en blanco donde debería estar la imagen predeterminada. Funciona bien cuando se muestra la imagen personalizada.
componente.html
<div *ngFor="let coverPhoto of coverPhotos"> <img src="{{coverPhoto}}" (error) ="changeSource($event)" /> </div>componente.ts
this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => { this.coverPhotos = result; }, error => { this.errors = error; this.changeSource(event); }, () => { } ); changeSource(event) { event.target.src = "https://imageurl"; }usar directamente (donde defaultImage es una variable en el archivo ts que contiene la ruta de la imagen predeterminada) -
(error)="$event.target.src = defaultImage"tu HTML-
<div *ngFor="let coverPhoto of coverPhotos"> <img src="{{ coverPhoto }}" (error)="$event.target.src = defaultImage" /> </div>Está pasando un evento desde este código en ts, que obviamente no está definido, y no necesita llamar a esta función desde aquí:
this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => { this.coverPhotos = result; }, error => { this.errors = error; this.changeSource(event); }, () => { } );El *ngFor lo estaba descartando. Eliminar esto pareció resolver el problema. No estoy muy seguro de por qué, así que publicaré una edición cuando descubra por qué.
<div> <img src="{{coverPhotos}}" (error)="$event.target.src = defaultImage" /> </div>