pinafore/routes/_components/Avatar.html

36 lines
814 B
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>