pinafore/routes/_components/Avatar.html

36 lines
895 B
HTML
Raw Normal View History

2018-01-15 06:41:19 +01:00
{{#await imagePromise}}
2018-01-20 02:47:00 +01:00
<img class="{{className}} avatar" aria-hidden="true" alt=""
2018-01-16 17:38:23 +01:00
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
2018-01-15 06:41:19 +01:00
{{then src}}
2018-01-20 02:47:00 +01:00
<img class="{{className}} avatar" aria-hidden="true" alt=""
2018-01-16 17:38:23 +01:00
src="{{account.avatar}}" />
2018-01-15 06:41:19 +01:00
{{catch error}}
2018-01-18 08:00:33 +01:00
<svg class="{{className}} avatar" aria-hidden="true">
2018-01-15 06:41:19 +01:00
<use xlink:href="#fa-user" />
</svg>
{{/await}}
2018-01-11 05:45:02 +01:00
<style>
2018-01-16 17:38:23 +01:00
.avatar {
2018-01-11 09:26:35 +01:00
width: 48px;
height: 48px;
2018-01-11 05:45:02 +01:00
border-radius: 4px;
}
2018-01-15 06:41:19 +01:00
2018-01-16 17:38:23 +01:00
svg.avatar {
2018-01-15 06:41:19 +01:00
fill: var(--deemphasized-text-color);
}
2018-01-11 05:45:02 +01:00
</style>
<script>
export default {
2018-01-15 06:41:19 +01:00
computed: {
2018-01-16 01:35:08 +01:00
imageSrc: (account) => account.avatar,
imagePromise: (imageSrc) => new Promise((resolve, reject) => {
2018-01-15 06:41:19 +01:00
let img = new Image()
img.onload = resolve
img.onerror = reject
2018-01-16 01:35:08 +01:00
img.src = imageSrc
2018-01-15 06:41:19 +01:00
})
}
2018-01-11 05:45:02 +01:00
}
</script>