Как получить фото из Firebase в Angular?

Question

[tn-ko]

В БД у меня хранятся url фото. Как можно вывести их на странице в Ангуляр?

Получаю фото на странице

<form [formGroup]="formTemplate" (submit)="onSubmit(formTemplate.value)">
            <div class="text-center">
              <img [src]="imgSrc" width="350px" height="250px" (click)="fileUploader.click()">
            </div>
            <div class="form-group">
              <label>Select file to upload</label>
              <input type="file" accept="image/*" class="form-control" #fileUploader formControlName="imageUrl"
                (change)="showPreview($event)">
              <div class="text-danger" *ngIf="isSubmitted && formControls.imageUrl.errors?.['required']">This field is required.
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
               <button type="submit" hidden="" id="add-img-form"></button>
              </div>
            </div>
          </form>

Обрабатываю событие в app.components

export class AppComponent implements OnInit {
imgSrc: string;
selectedImage: any = null;
isSubmitted: boolean;
imageList: any;

formTemplate = new FormGroup({

imageUrl: new FormControl('', Validators.required)
})

title = 'searcherapp';



constructor (private searcherService: SearcherService,
private service: ImageService,
private storage: AngularFireStorage) {}

ngOnInit() {
this.getSearchers();
this.resetForm();
this.service.imageDetailList.snapshotChanges().subscribe(
list => {
this.imageList = list.map(item => { return item.payload.val(); });
}
);
}

showPreview(event: any) {
if (event.target.files && event.target.files[0]) {
const reader = new FileReader();
reader.onload = (e: any) => this.imgSrc = e.target.result;
reader.readAsDataURL(event.target.files[0]);
this.selectedImage = event.target.files[0];
}
else {
this.imgSrc = '/assets/img/image_placeholder.jpg';
this.selectedImage = null;
}
}

onSubmit(formValue) {
this.isSubmitted = true;
if (this.formTemplate.valid) {
var filePath = `${formValue.category}/${this.selectedImage.name.split('.').slice(0, -1).join('.')}_${new Date().getTime()}`;
const fileRef = this.storage.ref(filePath);
this.storage.upload(filePath, this.selectedImage).snapshotChanges().pipe(
finalize(() => {
fileRef.getDownloadURL().subscribe((url) => {
formValue['imageUrl'] = url;
this.service.insertImageDetails(formValue);
this.resetForm();
})
})
).subscribe();
}
}

get formControls() {
return this.formTemplate['controls'];
}

resetForm() {
this.formTemplate.reset();
this.formTemplate.setValue({
imageUrl: '',

});
this.imgSrc = '/assets/img/image_placeholder.jpg';
this.selectedImage = null;
this.isSubmitted = false;
}

Сервис, связывающийся с БД

export class ImageService {
imageDetailList: AngularFireList;

constructor(private firebase: AngularFireDatabase) { }

getImageDetailList() {
this.imageDetailList = this.firebase.list('imageDetails');
}

insertImageDetails(imageDetails) {
this.imageDetailList.push(imageDetails);
}
}
Попытка вывода фото

Comments

[historydev]

3.8