Question

我正在创建一个Ionic应用程序，允许用户将图片上传到Firebase存储。我遇到的问题是，仅在关闭应用程序并重新打开后选择新图片时才更改图片。我希望它在上传后立即更改。并将其删除后，立即还原到占位符图片。

它可以正常工作，但是您只有在关闭应用程序并重新打开页面后才能看到图片。

TypeScript：

    constructor(private router: Router,
              private authService: AuthService,
              private imageService: ImageService,
              private afAuth: AngularFireAuth) {

      this.afAuth.authState.subscribe(user => {
      this.userId = user.uid
      console.log('constructoruser', this.userId);
      });
              }

  ngOnInit() {
          this.firestore.ref(`/Photos/${ this.userId }/`).child('photo0').getDownloadURL().then((url) => {
          this.photo0 = url;
        }).catch((error) => {
          console.log(error.message);
          this.photo0 = 'assets/img/add-an-image.png';
          console.log(this.photo0);
        });
  }

HTML：

<div>
    <img [src]="photo0" (click)="UploadPic0('photo0')"/>
</div>

Answer 1

根据您共享的代码段（不包含UploadPic0方法），发生这种情况是因为您在组件初始化期间仅通过url设置了图片一次（ ngOnInit ，只能调用一次）。

现在可能的解决方法：
-创建一个新方法来更新图像（更新为图像url或后备图像）
-在ngOnInit中调用此方法，每当您收到有关图像上传的成功/失败消息时。
-作为故障保护（确保在图像更新后调用render方法），请调用变更检测器。

类似

updateImage() {
        this.firestore.ref(`/Photos/${this.userId}/`).child('photo0').getDownloadURL().then((url) => {
         this.photo0 = url;
        }).catch((error) => {
          console.log(error.message);
          this.photo0 = 'assets/img/add-an-image.png';
        });
}

如何使图片上传立即可见

1 个答案: