69 lines
1.5 KiB
HTML
69 lines
1.5 KiB
HTML
{{#if error}}
|
|
<svg class="{{className || ''}} avatar size-{{size}}" aria-hidden="true">
|
|
<use xlink:href="#fa-user" />
|
|
</svg>
|
|
{{elseif $autoplayGifs}}
|
|
<img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt=""
|
|
src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
|
|
{{else}}
|
|
<NonAutoplayImg className="{{className || ''}} avatar size-{{size}}"
|
|
ariaHidden="true"
|
|
alt=""
|
|
src="{{account.avatar}}"
|
|
staticSrc="{{account.avatar_static}}"
|
|
:isLink
|
|
on:imgLoadError="set({error: true})"
|
|
/>
|
|
{{/if}}
|
|
<style>
|
|
:global(.avatar) {
|
|
border-radius: 4px;
|
|
background: var(--loading-bg);
|
|
}
|
|
|
|
:global(.avatar.size-extra-small) {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
:global(.avatar.size-small) {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
:global(.avatar.size-medium) {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
:global(.avatar.size-big) {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
:global(.avatar.size-big) {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
svg.avatar {
|
|
fill: var(--deemphasized-text-color);
|
|
}
|
|
</style>
|
|
<script>
|
|
import { imgLoadError } from '../_utils/events'
|
|
import { store } from '../_store/store'
|
|
import NonAutoplayImg from './NonAutoplayImg.html'
|
|
|
|
export default {
|
|
events: {
|
|
imgLoadError
|
|
},
|
|
store: () => store,
|
|
components: {
|
|
NonAutoplayImg
|
|
}
|
|
}
|
|
</script> |