Don't display an image that's not found in Angular

Question

I have a carousel which loads a bunch of images, but there's a possibility the image path is broken and the image can't be found.

If that's the case it currently causes an empty tag to be added, which adds an empty box and it's not intended to be there. Here's my code:

    <div class="gallery-img" gallerize>
      <ng-container *ngFor="let p of dynamicPaths">
          <img src="{{p}}">
      </ng-container>
    </div>

How do I prevent the image tag to be added at all if there's no image for that path?

Refer this https://stackoverflow.com/questions/36026428/angular2-show-placeholder-image-if-img-src-is-not-valid — hrdkisback, Feb 12 '18 at 12:32
Possible duplicate of [Angular2: Show placeholder image if img src is not valid](https://stackoverflow.com/questions/36026428/angular2-show-placeholder-image-if-img-src-is-not-valid) — ADreNaLiNe-DJ, Feb 12 '18 at 12:32

score 2 · Answer 1 · answered Feb 12 '18 at 12:33

2

Using error event and hidden html data binding you should be able to achieve this easily.

<img #myImage [hidden]="myImage.isBugged" (error)="myImage.isBugged = true" src="{{p}}">

answered Feb 12 '18 at 12:33

Ploppy

14,810
6
41
58

Since I'm looping through several paths, wouldn't it break the binding? – Simeon Nakov Feb 12 '18 at 13:08
It should not ! – Ploppy Feb 12 '18 at 13:34
@SimeonNakov Please, accept the answer If it fits your needs. – Ploppy Feb 15 '18 at 14:19

score 1 · Accepted Answer · answered Feb 12 '18 at 13:31

Thanks to discovering the (error) event I managed to think of a simple solution by tracking the index and splicing out the path. That way, the image tag simply won't be added.

<div class="gallery-img" gallerize>
  <ng-container *ngFor="let p of dynamicPaths; let i = index">
      <img src="{{p}}" (error)="dynamicPaths.splice(i, 1)">
  </ng-container>
</div>

score 0 · Answer 3 · answered Feb 12 '18 at 12:54

0

Angular 2 - Check if image url is valid or broken

Refer This also: Angular 2 - Check if image url is valid or broken

answered Feb 12 '18 at 12:54

Chellappan வ

23,645
3
29
60

Don't display an image that's not found in Angular

3 Answers3