Попытка представить значение img [src] как часть формы в ионном

Question

У меня есть изображение профиля, которое я получаю из Firestore в моем ионном приложении. Я пытаюсь отправить это изображение профиля как часть формы. Я получаю данные через profile.service. ProfileImage отображается в представлении, однако, когда я пытаюсь передать значение изображения. Изображение возвращает нулевое значение в базе данных Firebase, например:

Следующий код, приведенный ниже, является тем, что я пробовал, но возвращает ноль.

Tab1.html

<div id="form" *ngIf ="image.length > 0">
                     <form  id ="ngForm" [formGroup]="validations_form" (ngSubmit)="onSubmit(validations_form.value)" novalidate>
                       <ion-item color="dark">
                          <ion-label position="floating">Say Something</ion-label>
                          <ion-input type="text" formControlName="description"  color="light"></ion-input>
                          </ion-item>
                           <ion-item color="dark" *ngFor="let value of students">
                        <ion-label position="floating"></ion-label>
                     <ion-input type="text" formControlName="userName" [(ngModel)]="value.userName" color="light"></ion-input>
                           </ion-item>
              <ion-button id="hiddenSubmitButton"  class="submit-btn" expand="block" type="submit" color="medium-tint" form="ngForm"  style="display: none;">Create</ion-button> 
              </form> 
             </div>
           <div *ngFor="let value of students">
        <img [src]= "value.profileImage"> 
      </div>

Tab1.ts

 export class Tab1Page implements OnInit {

   profileImage : string;
   userName: any;
   userBio: string;
   userDetails: any;
   isVisible = true;
   item: any

  validations_form: FormGroup;
  image : any =[];
  category: string;
  students: {
     id: string; 
     isEdit: boolean; 
     userName: any; 
     userBio: any; 
     profileImage: any; }[];

 constructor(
    private imagePicker: ImagePicker,
    private formBuilder: FormBuilder,
    public actionSheetController: ActionSheetController,
    private file: File,
    private profileService: ProfileService

  ) { }

  ngOnInit() {


    this.profileService.read_Students().subscribe(data => {

      this.students = data.map(e => {
        return {
          id: e.payload.doc.id,
          isEdit: false,
          userName: e.payload.doc.data()['userName'],
          userBio: e.payload.doc.data()['userBio'],
          profileImage: e.payload.doc.data()['profileImage'],
        };
      })
      console.log(this.students);

    });

  }
  resetFields() {
   this.image = ["./assets/imgs/shane2.jpg"];
   this.category ='';
    this.validations_form = this.formBuilder.group({
      description: new FormControl('', Validators.required),   
      userName: new FormControl(this.userName, Validators.required),
      profileImage: new FormControl(this.profileImage)
      // profileImage: new FormControl(this.profileImage)
    });
  }

  newProject() {
    this.category = 'Wipping';
    console.log(this.category)
  }



  completeProject() {
    this.category = 'Wipped';
    console.log(this.category)
  }


  onSubmit(value){

    let data = {
      userName : value.userName || "", 
      description: value.description,
      profileImage: value.profileImage,
      image: this.image,
      category: this.category
    }
    this.firebaseService.createTask(data)
    .then(
      res => {
        this.router.navigate(["/tabs/tab4"]);
      }

Служба Firebase

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from 'firebase/app';
import 'firebase/storage';
import { AngularFireAuth } from '@angular/fire/auth';
import 'firebase/firestore';

  constructor(
    public afs: AngularFirestore,
    public afAuth: AngularFireAuth
  ){}

  createTask(value) {
    return new Promise<any>((resolve, reject) => {
      let currentUser = firebase.auth().currentUser;  
      this.afs.collection('tasks')
      .add({
        profileImage: value.profileImage,
        username: value.userName,
        category: value.category,
        description: value.description,
        image: value.image,
        uid: currentUser.uid,
        date: new Date()
      })
      .then(
        res => resolve(res),
        err => reject(err)
      )
    })
  }