Vue Avatar

Appearance

Return to top
On this page

Image

There are 2 ways to use an image in a component

Image Src & Image Alt

When using these properties, the component itself will display images

Prop nameTypeDefault value
img-srcString-
img-altString-

Code example

vue
<template>
  <vue-avatar 
      :size="100" 
      img-src="https://picsum.photos/200" 
      img-alt="Some image alt" 
  />
</template>

Demo

Some image alt

Slot

You can insert an image directly into a component using a slot

Code example

vue
<template>
  <vue-avatar :size="100">
    <img src="https://picsum.photos/200" alt="Some image alt">
  </vue-avatar>
  <vue-avatar :size="100">
    <picture>
      <img src="https://picsum.photos/200" alt="Some image alt">
    </picture>
  </vue-avatar>
</template>

Demo

Some image alt
Some image alt