为什么更新个人资料图片效果不好？

Question

每当我更改用户的个人资料图片时，其他用户都会发生同样的事情（他们的个人资料图片成为手动更新个人资料图片的用户之一）并且 firebase 中的存储运行良好，每次新图片更改，它被添加了

html：

<img [src]="profileImageUrl || 'assets/images/user.png'" alt="Profile" class="rounded-circle" style="size: 130%;" (click)="triggerFileInput()">

ts：

  profileImageUrl: string | null = null;
  private storage = getStorage();

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  triggerFileInput() {
    this.fileInput.nativeElement.click();
  }

  onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.profileImageUrl = e.target.result; 
        this.saveProfileImage(this.profileImageUrl!); 
      };
      reader.readAsDataURL(file);       
      this.uploadProfileImage(file);
    }
  }
      
  uploadProfileImage(file: File) {
    const userId = this.authService.getUserId(); // Ensure you get the current user's ID
    const storageRef = ref(this.storage, `profileImages/${userId}/${file.name}`);
    const uploadTask = uploadBytesResumable(storageRef, file);
      
    uploadTask.on('state_changed', (snapshot) => {},
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          this.saveProfileImage(downloadURL); 
        });
      }
    );
  }
    
  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {      
      this.loadProfileImage();
    }
  }
    
  saveProfileImage(imageUrl: string) {
    this.authService.updateProfileImage(imageUrl).then(() => {
      this.profileImageUrl = imageUrl;
    });
  }
    
  loadProfileImage() {
    this.authService.getProfileImage().then(imageUrl => {
      this.profileImageUrl = imageUrl || 'assets/images/user.png';
    });
  }    
}

Answer 1

在我看来，该组件好像用于每个图像。

“saveProfileImage”方法以某种方式使用 AuthService 保存图像。

此 AuthService 还用于“loadProfileImage”以加载每个事件的最新图像。

如果您现在在根目录中提供了此 AuthService，则所有 ImageComponent 都使用相同的实例并在它们之间收到通知。

如果这是问题所在，您必须将服务添加到 ImageComponent 的提供者。

这是我根据显示的代码提出的建议。