68 lines
		
	
	
		
			No EOL
		
	
	
		
			1.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			68 lines
		
	
	
		
			No EOL
		
	
	
		
			1.4 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;
 | 
						|
  }
 | 
						|
 | 
						|
  :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> |