pinafore/routes/_components/Avatar.html

36 lines
661 B
HTML
Raw Normal View History

2018-01-15 05:41:19 +00:00
{{#await imagePromise}}
<svg>
<use xlink:href="#fa-user" />
</svg>
{{then src}}
<img alt="Profile picture for @{{account.acct}}" src="{{account.avatar}}" />
{{catch error}}
<svg>
<use xlink:href="#fa-user" />
</svg>
{{/await}}
2018-01-11 04:45:02 +00:00
<style>
2018-01-15 05:41:19 +00:00
img, svg {
2018-01-11 08:26:35 +00:00
width: 48px;
height: 48px;
2018-01-15 03:28:50 +00:00
margin: 0 auto;
2018-01-11 04:45:02 +00:00
border-radius: 4px;
}
2018-01-15 05:41:19 +00:00
svg {
fill: var(--deemphasized-text-color);
}
2018-01-11 04:45:02 +00:00
</style>
<script>
export default {
2018-01-15 05:41:19 +00:00
computed: {
imagePromise: (account) => new Promise((resolve, reject) => {
let img = new Image()
img.onload = resolve
img.onerror = reject
img.src = account.avatar
})
}
2018-01-11 04:45:02 +00:00
}
</script>