MazAvatar

MazAvatar is a standalone component that displays an image or an icon with a caption. It can be used to display a user's profile picture, a placeholder image, or an icon.

TIP

This component uses vLazyImg directive

Basic usage

<script lang="ts" setup>
import MazAvatar from 'maz-ui/components/MazAvatar'
</script>

<template>
  <MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
</template>

Options

TIP

See all the options props here

LM

<script lang="ts" setup>
import MazAvatar from 'maz-ui/components/MazAvatar'
function clicked() { console.log('clicked') }
</script>

<template>
  <MazAvatar
    caption="Louis Mazel"
    size="1.5rem"
  />
  <MazAvatar
    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
    size="2rem"
    href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
    target="_blank"
    rounded-size="none"
    clickable
    no-size
  >
    <template #icon>
      <MazIcon name="eye" />
    </template>
  </MazAvatar>
  <MazAvatar
    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
    size="2.5rem"
    clickable
    rounded-size="xl"
    @click="clicked"
  />
  <MazAvatar
    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
    size="3rem"
    bordered
  />
</template>

On Error

<MazAvatar @error="error" />

Fallback image loaded on error

<MazAvatar
  src="https://broken-link-image-src.com"
  fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
/>

Loading

The props loading has 3 possible values: intersecting, lazy, or eager.

By default, the value is intersecting which means the image will be loaded when it's intersecting with the IntersectionObserver browser API. This mode uses the MazLazyImg component with vLazyImg directive to handle the lazy loading.

Native modes:

• lazy: The image will be loaded only when it's in the viewport
• eager: The image will be loaded immediately

These modes are native use an HTMLImageElement with the loading attribute. (see MDN). Useful for SSR (Server Side Rendering) or when you want to load the image immediately.

<MazAvatar
  loading="intersecting"
  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
/>
<MazAvatar loading="lazy" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
<MazAvatar loading="eager" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />

Props

Name	Description	Type	Required	Default	Possible values
style	The style of the component	Native type	No	undefined	-
class	The class of the component	Native type	No	undefined	-
src	The source of the image	string | null	No	undefined	-
caption	The caption of the avatar	string | null	No	undefined	-
href	The link of the avatar	string	No	undefined	-
to	The link (router-link) of the avatar	string | Record	No	undefined	-
alt	The alt of the image	string	No	'avatar image'	-
target	The target of the link	string	No	'_self'	-
size	The size of the avatar	string	No	undefined	-
bordered	Add a border to the avatar	boolean	No	undefined	-
clickable	Make the avatar clickable	boolean	No	undefined	-
square	Make the avatar square	boolean	No	undefined	-
no-elevation	Remove the shadow	boolean	No	undefined	-
show-caption	Show the caption	boolean	No	undefined	-
image-height-full	Make the image height full	boolean	No	undefined	-
hide-loader	Remove the loader	boolean	No	undefined	-
button-color	The color of the clickable button	MazColor	No	'info'	-
hide-clickable-icon	Remove the icon on hover when component is clickable	boolean	No	undefined	-
letter-count	Number of letters to display in the round text	number	No	undefined	-
rounded-size	Size of the rounded	"none" | "sm" | "md" | "lg" | "xl" | "full"	No	'full'	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
fallback-src	The fallback src to replace the src on loading error	string	No	undefined	-
loading	The loading strategy of the image - lazy, eager or intersecting	"lazy" | "eager" | "intersecting"	No	'intersecting'	'lazy' | 'eager' | 'intersecting'

Events

Event name	Properties	Description
click		Emitted when the avatar is clicked
error		Emitted when the image is in error
loaded		Emitted when the image is loaded
loading		Emitted when the image is loading
intersecting		Emitted when the image is intersecting

Slots

Name	Description	Bindings
round-text
icon
caption