Class variables/objects are null in .then()

Question

I am trying to display an image I download from Firebase Cloud Storage in a tag for an item in a list.

I have created a reusable component that defines the UI for an item in the list and it has an account passed to it through '@Input()'.

In my view, I am then using an identifier on the account as the id of the 'img' tag, so that once I have the image URL, I can update the 'src' attribute in code.

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-4">
                    <img id="{{ account.id }}"> <!-- Use account identifier -->
                </div>
                <div class="col-8">
                    <h2 class="card-title">{{ account.first_name }} {{ account.last_name }}</h2>
                    <p class="card-text">{{ account.about_me }}</p>
                </div>
            </div>
        </div>
    </div>

In the ngOnInit() function for this component, I call the getImage() function and grab the URL that I need from Firebase which is an async function.

However, once the function returns the Promise and I am in the '.then()' part of the code, all my class objects/variables are null.

export class UserListCardComponent implements OnInit {

  @Input() account: FIRAccount;
  constructor(private firebaseStorageService: FirebaseStorageService) { }

  ngOnInit(): void {
    this.getImage();
  }

  getImage() {

    this.firebaseStorageService
        .read(this.account.profile_picture_url)
        .then(function(url) {

          var accountId = this.account.id // This is null

          var img = <HTMLImageElement>document.getElementById(accountId);
          img.src = url;
          
        }).catch(function(error) {
          console.log("Failed to get Profile Picture")
          console.log(error)
        });
  }

}

Furthermore, each time I try to access the class objects within the '.then', I get this error

TypeError: undefined is not an object (evaluating 'this.account')

When I try to access any of the classes objects within the '.then' area, they are all null and I have no idea why.

If I update the 'img' tag id to be a static value, such as 'profilePicture', my code finds the 'img' tag and adds the URL to the src attribute, but, it always finds the first 'img' tag in the list.

I need it to locate the 'img' tag for this list item, not any other list item in the list, hence why I am using an identifier.

Any help would be appreciated as I have no idea what I am doing wrong.

Here is the code for passing an account to the reusable component

<div class="row h-100">
<div class="col-md-4">
    <app-list-filter></app-list-filter>
</div>

<div class="col-md-8">
    <div *ngFor="let account of accounts">
        <user-card [account]="account"></user-card>
    </div>
</div>

Here is the FIRAccount object

    import { FIRIdentifiable } from '../paths/identifiable/firidentifiable';

export interface FIRAccount extends FIRIdentifiable {
    
    owner_uid: string;
    account_collection_reference: string;
    image_urls_to_delete: [string];
    profile_picture_url: string;
    first_name: string;
    last_name: string;
    about_me: string;
    fcm_token: string;
    instagramHandle: string;
    facebookUsername: string;
    twitterHandle: string;
}