angularfire2 Показать изображение после загрузки

Question

Используя пример кода из примера использования. Я могу успешно загрузить файл изображения и отобразить ссылку на него. Однако я бы хотел отобразить изображение в теге img сразу после его загрузки вместо ссылки на него. Как бы я это сделал? Я пробовал что-то вроде этого безрезультатно:

  profileUrl: Observable<string | null>;

  ....


  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');

  task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = this.profileUrl = ref.getDownloadURL())
  )
  .subscribe();

И в моем файле шаблона:

<img [src]="profileUrl | async" />

Все это из примера, но мне нужно объединить пример использования с разделом " Загрузка файлов ".

Answer 1

Я понял. Вы не можете подписаться на снимок, но вы можете на ссылку для загрузки.

  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');
  task.snapshotChanges().pipe(
    finalize(() => {
      this.downloadURL = ref.getDownloadURL()
      this.downloadURL.subscribe(url => (this.image = url));
    })
  )
  .subscribe();

Answer 2

Я сделал что-то подобное недавно. Моя задача состояла в том, чтобы загрузить изображение и затем отобразить его на той же странице, на которой оно было загружено. Я написал WebAPI на сервере "upload", и в этом примере не используется angular2fire, поэтому в ответе на подписку angular2fire вы обновите связанную переменную до [src].

HTML:

<img *ngIf="uploaded" [src]="myURL"> 

TS:

uploadedImage = "savedNameOfUploadedFile.png";
uploaded = false;
myURL = '';
uploadImage(){
    this._httpClient.post(this.apiEndPoint + '/imageupload', formdata)
    .subscribe(
        data => {
            this.uploaded = true;
            this.myURL = 'http://locationOfFileServer/' + this.uploadedImage;
          },
        error => { console.log(error); }
    );
}

Мой код был намного сложнее, но это урезанная версия для удобства чтения. Я использовал BehaviorSubject для связи со своей службой загрузки и моим компонентом представления, но, как я уже сказал, это упрощенная версия для удобства чтения. Если вам нужно больше деталей, дайте мне знать, и я скопирую / вставлю свой рабочий код.