CODEWITHSUNDEEP
htmlangularerror-handling
tillias
tillias

Reputation: 1265

Error handling for missing image in Angular 9

I have an Angular 9 application. I need to display alternative image if the one specified in src is missing. I don't want use onerror, because it is deprecated.

Here is what I found:

<div *ngFor="let entity of entities">
  <div>
    <img [src]="entity.imageUrl" (error)="onImageError(entity)" width="70" alt="IMAGE"/>

How can I rewrite entity.imageUrl inside onImageError() ?

I have tried following:

  onImageError(entity: IEntity) {
    entity.imageUrl = 'some-image.svg'
  }

But it says

36:3 error expected call-signature: 'onImageError' to have a typedef (tslint:typedef) @typescript-eslint/tslint/config

Upvotes: 2

Views: 8083

Answers (3)

mohamed hassan
mohamed hassan

Reputation: 17

Use inline (error)

instead of creating a method that handles broken images inside the ts file,

just use this, but be careful about the image path to not stuck in a loop trying to get the path

<img #iconRef [src]="item.icon" [alt]="item.name" (error)="iconRef.src = 'your-path\\default-thumbnail.png'">

the idea is simple just make a local reference and change the path if an error happens.

Upvotes: 1

navdbaloch
navdbaloch

Reputation: 201

Probably your error is due to some typescript settings.

I would suggest you to either change the value inline like

(error)="entity.imageUrl = 'some-image.svg'"

or define the return type on the function as void

onImageError(entity: IEntity):void {
    entity.imageUrl = 'some-image.svg'
}

Hope this helps!

Upvotes: 1

Barremian
Barremian

Reputation: 31125

The property bindings are TS expressions. You could you in theory simply say

<img [src]="entity?.imageUrl || alternateUrl" width="70" alt="IMAGE"/>

Upvotes: 2

Related Questions