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> |