File exists in ngFor

Hi all,
I have a list of firebase items as an observable list. Those items contain an image url which can be loaded to the device. This works so far fine.
I have ion-scroll where I display the images.

    <ion-scroll scrollX="true" direction="x">
      <ion-card *ngFor="let item of trainingsFilterStressModelRef$ | async" (click)="openTraining(item)">
        <img src="{{getImagePath(item) | async}}">
        <div class="card-title">{{ item.name }}</div>
        <ion-card-content >
          <p class="shortdescription">{{ item.shortDescription }}</p>
      </ion-card-content>
      </ion-card>
    </ion-scroll>

If the user is not online I want now show the downloaded image or if not, a dummy image.
For this I created within the js the methode getImagePath:

  async getImagePath(training: TrainingModel) {
    let filepath = this.file.dataDirectory; 
    await this.file.checkFile(filepath, training.uuid + training.nameImage)
    .then(
      (exists) => {
        console.log('exists ');
        return filepath + training.uuid + training.nameImage;
      },
      (error) =>{ 
        console.log('take default ');
        return training.sourceImage;
    });
  }

But this ends up in an endless debug outputs. Seems like return value is not excepted :frowning:
If I return a value without making the getImagePath async everything works well but I need the checkFile methode and for this I have to wait.
Any tipps?
thx,
patrik