占位符图片 Angular

Question

我有以下问题：我想使用默认图像，直到通过异步调用加载另一个图像。问题是，遵循此How do I get a placeholder image to load when my image is still loading from server 并使用此代码我得到两个图像，而不是一个替换另一个。我应该修改什么？

  async getData() {
     await this.gs.getMaxGifs(this.name, this.offset).subscribe((response: any) => {
       this.result.push(...response.data);
       if (this.value == 'asc') {
         this.result.sort((val1, val2) => {
           return new Date(val1.import_datetime).getTime() - new Date(val2.import_datetime).getTime()  //ASC
         })
       }
       else {
         this.result.sort((val1, val2) => {
           return new Date(val2.import_datetime).getTime() - new Date(val1.import_datetime).getTime()  //DESC
         })
       }
       this.offset += 50;
       if (this.result.length != response.pagination.total_count) {
          this.getData()
       }
     });
   }

.html 页面：

<ion-grid fixed>
  <ion-row>
    <ion-col size="4" *ngFor="let r of result; let i = index">
      <ion-card>
        <ion-card-content>
          <img #userImage src={{r.images.downsized.url}} width="300" height="200" (click)="getDetails(i)">
          <img *ngIf="!userImage.complete" src="../../../assets/error.png">
        </ion-card-content>
        <ion-card-header *ngIf="clicked === i">
          <ion-card-title>
            title: {{r?.title}}
          </ion-card-title>
          <ion-card-subtitle>username: {{r?.username}}</ion-card-subtitle>
          <ion-card-subtitle>import date:{{r?.import_datetime}}</ion-card-subtitle>
        </ion-card-header>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

也许您选择的方法在 ionic 中不起作用。

试试这个：

 <ion-card-content>

      <ng-container *ngIf="r && r?.images?.downsized?.url != null; else elseBlockErrorImg">
         <img src={{r.images.downsized.url}} width="300" height="200" (click)="getDetails(i)">
      </ng-container>

      <ng-template  #elseBlockErrorImg>
          <img src="/assets/error.png">                                
      </ng-template>

</ion-card-content>

我不知道你是如何得到 'r' 的，但如果你是异步得到的，试试改变这个：

*ngIf="r | async; else elseBlockErrorImg">