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

@Sebastian.Bizzdar wrote:

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>

Bildschirmfoto 2018-06-24 um 17.31.20.png375x534 41.1 KB

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

Posts: 1

Participants: 1

Read full topic