Avatar

Besides the native features of img, support lazy load, custom placeholder and load failure, etc.

Basic Usage

Indicate how the image should be resized to fit its container by fit, same as native object-fit.

fill

contain

cover

none

scale-down

Viwer Source

Code

```vue

<template>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <span class="demonstration">{{ fit }}</span>
      <FieldImage shape="shape" :size="100" :src="url" :fit="fit" />
      <br>
      <el-divider />
      <br>
      <FieldImage shape="circle" :size="100" :src="url" :fit="fit" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
```

:::

Props

Name	Description	Type	Mandatory
src	the source of the image for an image avatar.	string	True

Attributes

Name	Description	Type	Default
fit	set how the image fit its container for an image avatar fit / contain / cover / none / scale-down	string	cover
size	avatar size large default small	String Number	default
shape	avatar shape circle / shape	string	cover

Example for Developer

Open in StackBlitz

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FielAvatar                    # Field Avatar specific components.