avatar.hbs

<img class='rounded-full object-cover' src={{this.src}} alt={{this.alt}} height={{this.size}} width={{this.size}} onerror={{this.useLetterform}}>

avatar.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class AvatarComponent extends Component {
  size = 48;
  @tracked letterform;

  get alt() {
    return `Profile image for ${this.args.name}`;
  }

  get src() {
    if (this.letterform) {
      return this.letterform;
    }

    let { companyId } = this.args;
    return `https://s3.amazonaws.com/somebucket/companies/${companyId}`;
  }

  @action useLetterform() {
    this.letterform = dataUriAsSrc(this.args.name, this.size);
  }
}