*ngIf fallback / default img src in Ionic

Ionic Framework ionic-v3
1

Hello all,

I am trying to make it where my img src displays a default/fallback img
when I receive a 404 error from a URL I am trying to display an img from
in my HTML code.

Here is the URL that gives me an error…
http://hfsinventory.com/pics/equipment/15885/image.jpg

My code right now, in HTML, is…

<ion-slide *ngFor="let item of items">
            <img src={{item.image}}>

…which properly displays an img when it is available.

I want…

<ion-slide *ngFor="let item of items">
            <img *ngIf="imgNotAvailable404" src=".../.../assets/img/defaultIMG.png">
            <img *ngIf="imgIsAvailable" src={{item.image}}>

...or any other format that does the same thing basically

Not sure if *ngIf is what I really need to be using, but that is what I see when I search Google.
Thanks for any help!!

2

Whenever I use ngFor, I have a rule that says anything needed inside there must be available from within the loop variable. So in your case, I would populate each item.image with the fallback URL inside the controller when necessary, and avoid ngIf.

3

Thanks for the reply! Could you provide an example?
I am absolutely new to Ionic and Angular, so I just Google everything.

4

Figured it out…this is what I used in the HTML that needed the fallback image src.
The fallback img is in the API call where I checked if a certain data in the JSON was there/true.

-If it was there, pull this image
-else, pull something else

Hope this helps anyone passing by!


<ion-list *ngFor="let item of items">
    <ion-item button menuClose (click)="pushNav(item.table, item.ID)">

      <ion-thumbnail *ngIf = "item.noimg; else elseBlock" item-start>
        <img src="{{item.featured}}">
      </ion-thumbnail>

      <ng-template #elseBlock>
        <ion-thumbnail>
          <img src="{{item.pics[0]}}">
        </ion-thumbnail>
      </ng-template>
....
5

I find the following vastly easier to read:

<ion-thumbnail>
  <img [src]="item.noimg ? item.featured : item.pics[0]">
</ion-thumbnail>