How to tell if an image was not loaded in Angular?

Question

Currently I have this in my component

<img *ngIf="(showImage$ | async)" [alt]="image.alt [title]="image.title" [src]="image.src" (load)="imageHasBeenLoaded($event)" />

and the I do some actions in the imageHasBeenLoaded() function... but how do I handle cases where it fails? eg. if the image request returns a 404?

Fateh Mohamed · Accepted Answer · 2018-05-04 18:38:38Z

6

you can use (error) that way to set default image in case of 404, you can set a default pic from asset or from placeholder

<img [src]="slide.img" (error)="slide.img='./assets/img/default.jpg'">

answered May 4, 2018 at 18:38

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mackelito Over a year ago

Thx.. have been searching for the other methods like (load) but found nothing in the angular docs.. do you know where I can find some references?

Fateh Mohamed Over a year ago

load is use to know when the img is completely loaded, it will be useful to show a loading spinner till the img is loaded but i don't think that you can handle fails inside

GreedyAi · Accepted Answer · 2018-05-04 19:08:34Z

0

If you get 404. I'm pretty sure you should have had mistake in path or the name of the file. Or you didn't put them in the path that you indicated. like ./assets/img/default.jpg.

My code from my project looks like.

<mat-card *ngFor="let respo of work.Used" fxFlexAlign="auto" style="background:#E0E0E0; height:40px; margin-left: 5px; margin-bottom: 5px; text-align: center; padding: 5px;">
    <img style="height: 40px; margin:auto;" src={{respo}} alt="Photo of a Shiba Inu">
  </mat-card>

I give sources for each image through json file that finally gets to this part of the code and ends up at src={{respo}}. I think you should be using {{}} too. And if you get error it should mean that you made mistake spelling. be aware the path and name are case sensitive.

answered May 4, 2018 at 19:08

GreedyAi

2,8394 gold badges31 silver badges57 bronze badges

3 Comments

Mackelito Over a year ago

obviously the file is missing ;) but files can be removed without the database being updated so there is not an angular code error here ;) .. so why do you thing I should use {{}}? It's just another way to bind stuff?

GreedyAi Over a year ago

I guess I misunderstood your question. To be honest the only reason I suggested {{}} is because it worked for me. :D

Mackelito Over a year ago

hehe.. well then I might enlighten you on this topic. {{}} can only be used for strings.. so if you have a boolean then you must use the property binding [].. personally I find the property binding easier to read ;)

Vikas · Accepted Answer · 2018-05-04 19:19:25Z

0

you can bind imageHasBeenLoaded() method to error event which is triggered if an error occurs while loading an external file (e.g. a document or an image).

(error)="imageHasBeenLoaded($event)"

<img *ngIf="(showImage$ | async)" [alt]="image.alt [title]="image.title" [src]="image.src" (error)="imageHasBeenLoaded($event)" />

answered May 4, 2018 at 19:19

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

Collectives™ on Stack Overflow

How to tell if an image was not loaded in Angular?

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related