Загрузить изображения в хранилище и добавить их в базу данных и получить их

Question

Я делаю приложение для викторины для школы. Я сделал форму, где вы можете создавать вопросы с. Это выглядит так: https://prnt.sc/prkm74
В красном квадрате вы видите извлеченные данные вопроса из базы данных, изображение здесь жестко закодировано в данный момент.

Я не знаю, как заставить работать селектор файлов для загрузки изображений в хранилище, которые потом (я думаю) должны быть связаны с вопросами в базе данных.

Этоэто код, который я использую для получения данных из базы данных.

<div class="row">
            <div class="col-md-6">
            <img  src="../../../assets/traffic.jpg" class="card-img">
            </div>
            <div class="col-md-6">
            <div class="card-body">
                <p class="card-text">A. {{ question.payload.doc.data().option1 }}</p>
                <p class="card-text">B. {{ question.payload.doc.data().option2 }}</p>
                <p class="card-text">C. {{ question.payload.doc.data().option3 }}</p>
                <p class="card-text">Answer: {{ question.payload.doc.data().answer }} </p>
            </div>
            </div>
        </div>

И это код в файле ts, который использует кнопка загрузки

create() {
    let data = this.questionForm.value;
    this.questionService.createQuestion(data)
       .then(res => {
         console.log("back at questions")
       });
       this.resetForm();
  }

ЭтоСлужба вопросов:

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class QuestionService {

  constructor(private firestore: AngularFirestore) { }



  createQuestion(data) {
    return new Promise<any>((resolve, reject) =>{
        this.firestore
            .collection("Questions")
            .add(data)
            .then(res => {console.log(res); resolve();}, err => reject(err));
    });
  }

  getQuestions() { 
    return this.firestore.collection("Questions").snapshotChanges();
  }

  update(question) {
    return this.firestore.collection("Questions").doc(question.payload.doc.id).set({ completed: true }, { merge: true });
  }

  delete(question) {
    return this.firestore.collection("Questions").doc(question.payload.doc.id).delete();
  }

}

Я хочу, чтобы кнопка загрузки добавила изображения в базу данных и связала ее с остальными заполненными данными в форме, чтобы я мог получить данные с помощью {{question. payload.doc.data (). imageUrl}}, например