*ngIf fallback / default img src in Ionic

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…

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!!

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.

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

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}}">

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

I find the following vastly easier to read:

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