Pinafore-Web-Client-Frontend/routes/_components/Avatar.html

{{#await imagePromise}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
{{then src}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
     src="{{account.avatar}}" />
{{catch error}}
<svg class="{{className}} avatar">
  <use xlink:href="#fa-user" />
</svg>
{{/await}}

<style>
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
  }

  svg.avatar {
    fill: var(--deemphasized-text-color);
  }
</style>
<script>
  export default {
    computed: {
      imageSrc: (account) => account.avatar,
      imagePromise: (imageSrc) => new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = resolve
        img.onerror = reject
        img.src = imageSrc
      })
    }
  }
</script>