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