Question

假设您有一个社交媒体应用程序，其中包含个人资料图片，用户可以将其从Ionic应用程序上传到Firebase。上传后，占位符图标应动态更改为用户刚刚上传的实际个人资料照片。并且，如果用户删除了该图片，则占位符图像应作为个人资料图片返回。

我需要一些有关如何执行此操作的指南。我不确定该怎么做，尽管我知道它应该比我正在做的事情容易。

我当前代码的问题是，仅在加载页面时才更新图片。因此，如果用户上传图片，则必须离开该页面，然后重新加载该页面才能将其视为个人资料图片。

如何使它动态化？图片上传后，将立即用作个人资料图片。删除后会返回占位符图像吗？

  ionViewDidLoad() {
      this.loggedInUser = firebase.auth().currentUser; // code from firebase docs

      this.firestore.ref(`/Photos/${ this.userId }/`).child('photo0.png').getDownloadURL().then((url) => {
          this.cameraServiceProvider.photo0 = url;
        }).catch((error) => {
          console.log(error.message);
          this.cameraServiceProvider.photo0 = 'UseButton'
          console.log(this.cameraServiceProvider.photo0);
        });     
   }

    <ion-card class="prflBg">
      <ion-card-content >
            <div [ngSwitch]="this.cameraServiceProvider.photo0">
                <div *ngSwitchDefault>
                    <img [src]="this.cameraServiceProvider.photo0" (click)="Present('photo0.png')"/>
                </div>
                <div *ngSwitchCase="'UseButton'">
                    <img src="assets/img/add-an-image.png" (click)="selectPhoto('photo0.png')"/>
                </div>      
            </div>
        </ion-card-content>
    </ion-card>

Answer 1

您可以为图像的[src]使用吸气剂，以针对每种情况返回正确的来源。上载图像并获取其源之后，如果您使用的是changeDetectorRef.markForCheck()更改检测策略，则应该运行OnPush来获取更改并重新检查视图，出于性能考虑，绝对应该这样做。 / p>

如何在个人资料图片和占位符图像之间动态更改

1 个答案: