How do I turn ion-thumbnail off when there are no images available

Viewed 608

I have built an ion-card that displays both images and documents stored on the App. What I am trying to do is turn off the ion-thumbnail when the [src]="img.path" is empty. I have tried *ngIf != "[src]= ''" on the ion-thumbnail but No Joy to be had.

.html

 <ion-card>
    <ion-card-content> 
      <div class = "fileButtons">
        <ion-button  fill="outline" (click)="selectImage()">
          Add Photo
          <ion-icon slot="start" name="camera"></ion-icon>
        </ion-button>
        <ion-button  fill="outline" (click)="getFile()">
          Add Files
          <ion-icon slot="start" name="document"></ion-icon>
        </ion-button>
      </div>
      <ion-list>
        <ion-item *ngFor="let img of images; index as pos" class="ion-text-wrap">
          <ion-thumbnail slot="start" *ngIf !="[src]= ' '">
            <ion-img [src]="img.path" alt="No preview"></ion-img>
          </ion-thumbnail>
          <ion-textarea auto-grow="true" >{{ img.name }}</ion-textarea>
          <ion-button slot="end" fill="clear" (click)="deleteImage(img, pos)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

.ts

loadStoredImages_Documents() {
  this.storage.get(this.STORAGE_KEY).then(images => {
    if (images) {
      let arr = JSON.parse(images);
      this.images = [];
      arr  = arr.filter(a => a.includes("questionid_" + this.sectionUUID));
      for (let img of arr) {
        let filePath = this.file.dataDirectory + img;
        let resPath = this.pathForImage(filePath);
        this.images.push({ name: img, path: resPath, filePath: filePath });
      }
    }
  });
}
1 Answers

If you want to show ion-thumbnail only when img.path exists you can use:

<ion-thumbnail slot="start" *ngIf="img.path">
      <ion-img [src]="img.path" alt="No preview"></ion-img>
</ion-thumbnail>

In that case, the rest of the ion-item, such as the name and delete button, will be there.

images = [
      {
        id: 0,
        name: 'First image',
        path: ''
      },
      {
        id: 1,
        name: 'Second image',
        path: 'https://lh6.googleusercontent.com/-wUTN0hVj-6I/AAAAAAAAAAI/AAAAAAAAACA/EOUkVyZSMNY/photo.jpg?sz=128'
      },
      {
        id: 2,
        name: 'Third image',
        path: 'https://lh6.googleusercontent.com/-wUTN0hVj-6I/AAAAAAAAAAI/AAAAAAAAACA/EOUkVyZSMNY/photo.jpg?sz=128'
      }
]

enter image description here

Related