В БД у меня хранятся 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);
}
}
Попытка вывода фото