ionic-framework - 没有可用图像时如何关闭 ionic 缩略图

Question

我构建了一个ion-card，可以显示应用程序中存储的图像和文档。我想要做的是在 [src]="img.path" 为空时关闭 ion-thumbnail。我已经在 ion-thumbnail 上尝试了 *ngIf != "[src]= ''" 但没有任何乐趣。

.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 });
      }
    }
  });
}

Answer 1

如果你想只在 img.path 存在时显示 ion-thumbnail 你可以使用:

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

在这种情况下，ion-item 的其余部分(例如名称和删除按钮)将在那里。

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'
      }
]