{#if error} <svg class={computedClass} style={svgStyle} aria-hidden="true"> <use xlink:href="#fa-user" /> </svg> {:elseif $autoplayGifs} <LazyImage className={computedClass} ariaHidden="true" alt="" src={account.avatar} {width} {height} on:imgLoad="set({loaded: true})" on:imgLoadError="set({error: true})" /> {:else} <NonAutoplayImg className={computedClass} ariaHidden="true" alt="" src={account.avatar} staticSrc={account.avatar_static} {width} {height} {isLink} on:imgLoad="set({loaded: true})" on:imgLoadError="set({error: true})" /> {/if} <style> :global(.avatar) { border-radius: 4px; background: var(--loading-bg); } :global(.avatar.loaded) { background: none; } svg.avatar { fill: var(--deemphasized-text-color); } </style> <script> import { store } from '../_store/store' import NonAutoplayImg from './NonAutoplayImg.html' import { classname } from '../_utils/classname' import LazyImage from './LazyImage.html' export default { data: () => ({ className: void 0, loaded: false, error: void 0, isLink: false }), store: () => store, computed: { computedClass: ({ className, loaded }) => (classname( 'avatar', className, loaded && 'loaded' )), width: ({ size, $isMobileSize }) => { switch (size) { case 'extra-small': return 24 case 'small': return 48 case 'big': return $isMobileSize ? 80 : 100 case 'medium': default: return 64 } }, height: ({ width }) => width, svgStyle: ({ width, height }) => `width: ${width}px; height: ${height}px;` }, components: { NonAutoplayImg, LazyImage } } </script>