pinafore/routes/_components/Avatar.html

{{#if error}}
<svg class="{{className}} avatar" aria-hidden="true">
  <use xlink:href="#fa-user" />
</svg>
{{else}}
<img class="{{className}} avatar" aria-hidden="true" alt=""
     src="{{account.avatar}}" on:loadError="set({error: true})" />
{{/if}}
<style>
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
  }

  svg.avatar {
    fill: var(--deemphasized-text-color);
  }
</style>
<script>
  export default {
    events: {
      loadError (node, callback) {
        node.addEventListener('error', callback)

        return {
          teardown () {
            node.removeEventListener('error', callback)
          }
        }
      },
    }
  }
</script>