How can I get images stored in Firebase Storage to display in Angular 3

Question

I've created a buzzfeed style quiz and at the end I want an image to pop up. I'm storing the images in Firebase Storage to use it like an API and pull the files into my Angular app for a class project. I've installed and imported the firebase into Angular, I just don't know how to access the images. I want to store them in an object, or dictionary, like this:

    { name: 'sunlight', total: 18 },
    { name: 'aura', total: 14 },
    { name: 'halo', total: 17 },
    { name: 'icebow', total: 20 },
    { name: 'nimbus', total: 19 },
  ];

This is the code for printing the correct sum at the end of the quiz, and where I want the images to pop up from:

onSubmit(form: NgForm) {
    const candidateAnswer = this.addNums(form.form.value);
    const chosenBrew = this.selectBrew(candidateAnswer);
    console.log(chosenBrew?.name);
    console.log(`
Your Answer: ${candidateAnswer}`);
  }
  addNums(value: any) {
    return value['brewStyle'] + value['flavor'] + value['roast'];
  }
  selectBrew(answer: any) {
    for (let brew of this.brews) {
      if (brew['total'] === answer) {
        return brew;
      }
    }
    return;
  }

So where or how can I insert the images from firebase like I'm using it as an API?

question from:https://stackoverflow.com/questions/66054098/how-can-i-get-images-stored-in-firebase-storage-to-display-in-angular-3

Answer 1

Waitting for answers