Angular try to get specific value doesnt work

Question

I am trying to get data from my Firestore Collection. This works if I print my JSON. If I want now to show one value it doesn't work. To get my data I created the following:

    interface Note{
      imageUrl: string;
    }

    ngOnInit(): void {
      window.scrollTo(0, 0);
      this.notesCollection = this.afs.collection('PromotedBlogs')
      this.notes = this.notesCollection.valueChanges()
    }

and I want to show the imageUrl in a img. To do so I tried the following, but it doesn't work, it just shows the grey background:

<div class="blogrow">
    <div class="blogcolumn" style="background-color:#aaa;" *ngFor="let note of notes | async"  >
        <img src="{{ (note | async).imageUrl}}" width="100%" height="300px">
    </div>
  </div> 

Answer 1

There could be a number of issues here. It is difficult to say with the limited code you've provided.

I'm working on the assumption that if you did something <div> {{notes | json}} </div> in your template it would successfully display your JSON. This assumption is based off of your comment:

"This works if I print my JSON"

A potential issue that sticks out is your duplicate use of the async pipe and your use of brackets in the src attribute of the image tag.

Since you unwrap the Observable in your looping logic (*ngFor="let note of notes | async") you don't need to then try to unwrap it again when accessing the individual properties of the note objects. Additionally in Angular you do not need to use the "squiggly bracket notation for the src attribute of an image tag.

You can try to update your image tag to <img [src]="note.imageUrl" width="100%" height="300px"> and see if that fixes your issue.

If not you may try to hardcode the path to verify your path is actually correct to begin with, something like: <img src="path/to/image.png" width="100%" height="300px">