semaphore/routes/_components/Avatar.html

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

<style>
  img, svg {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border-radius: 4px;
  }

  svg {
    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>