[solved] *ngIf generates ERROR 404 when using ion-thumbnail, ion-avatar or img in ng-template

Ionic Framework ionic-v3
1

I am trying to make use of *ngIf to display an existing profile photo or a random avatar pic in case the profile photo URL is not existing in the database.

Rendering from [src] within an ng-template does not work.

I already tried to use src instead of [src] and I tried without using the ion-card. It seems the issue is a conflict between *ngIf / ng-template and the rendering of the ion-thumbnail, ion-avatar or img

Can somebody please explain what I am doing wrong here?
I really appreciate your comments & help!

As explanation some code examples here:

<!-- working smoothly -->
      <ion-item><ion-thumbnail><img [src]="(profileData | async)?.profilePhotoUrl"></ion-thumbnail></ion-item>

      <!-- working smoothly -->
      <ion-card>
        <ion-card-header>HELLO WORLD</ion-card-header>
        <ion-card-content><ion-item><ion-thumbnail><img [src]="(profileData | async)?.profilePhotoUrl"></ion-thumbnail></ion-item>
          <p class="placeholdertext" text-wrap>You can change your profile photo at any time.</p>
          <button ion-button outline item-end (click)="photoUpload()">Change</button>
        </ion-card-content>
      </ion-card>

      <!-- not working / img does not get rendered -->
      <div *ngIf="(profileData | async)?.profilePhotoUrl; then ProfilePhoto else noProfilePhoto">
      </div>
      <ng-template #ProfilePhoto>
        <ion-card>
          <ion-card-header>HELLO WORLD</ion-card-header>
          <ion-card-content><ion-item><ion-thumbnail><img [src]="(profileData | async)?.profilePhotoUrl"></ion-thumbnail></ion-item>
            <p class="placeholdertext" text-wrap>You can change your profile photo at any time.</p>
            <button ion-button outline item-end (click)="photoUpload()">Change</button>
          </ion-card-content>
        </ion-card>
      </ng-template>
      <ng-template #noProfilePhoto>
        <ion-card>
          <ion-card-header>HELLO WORLD</ion-card-header>
          <ion-card-content><ion-thumbnail><img src="https://api.adorable.io/avatars/200/{{(user | async)?.uid}}@adorable.png"></ion-thumbnail>
          <h2>No Profile Photo</h2>
          <p text-wrap class="placeholdertext">Please upload a profile photo.</p>
          <button ion-button outline item-end (click)="photoUpload()">Upload</button>
          </ion-card-content>
        </ion-card>
      </ng-template>

20

My environment:

cli packages:

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node  : v8.6.0
npm   : 6.0.1
OS    : macOS High Sierra
Xcode : Xcode 9.4.1 Build version 9F2000

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro
2

I found a solution myself and hope this is a good one :slight_smile:

Look at the “as pURL” variable declaration in the *ngIf ! Seems this helped…

 <ion-item *ngIf="(profileData | async)?.profilePhotoUrl as pURL; else monster">
              <ion-thumbnail item-start><img src="{{pURL}}"></ion-thumbnail>
                <p class="placeholdertext" text-wrap>You can change your profile photo at any time.</p>
                <button ion-button outline item-end (click)="photoUpload()">Change</button>
      </ion-item>
      <ng-template #monster>
          <ion-card>
              <ion-card-header>Looking good?</ion-card-header>
              <ion-card-content><ion-thumbnail><img src="https://api.adorable.io/avatars/200/{{(user | async)?.uid}}@adorable.png"></ion-thumbnail>
              <h2>Sorry, not yet...</h2>
              <p text-wrap class="placeholdertext">Please upload a profile photo.</p>
              <button ion-button outline item-end (click)="photoUpload()">Upload</button>
              </ion-card-content>
            </ion-card>
      </ng-template>