时间戳

首页 > 解决方案 > 如何在个人资料图片和占位符图片之间动态更改

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

问题描述

假设您有一个社交媒体应用程序，其中包含用户从 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>

标签： htmlangulartypescriptfirebase-storageionic4

解决方案

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

推荐阅读