element-plus/website/docs/es/avatar.md

Avatar

Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.

Básico

Use los props shape y size para establecer la forma y el tamaño del avatar

:::demo

<template>
  <el-row class="demo-avatar demo-basic">
    <el-col :span="12">
      <div class="sub-title">circle</div>
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="50" :src="circleUrl"></el-avatar>
        </div>
        <div class="block" v-for="size in sizeList" :key="size">
          <el-avatar :size="size" :src="circleUrl"></el-avatar>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="sub-title">square</div>
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
        </div>
        <div class="block" v-for="size in sizeList" :key="size">
          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    data() {
      return {
        circleUrl:
          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        squareUrl:
          'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        sizeList: ['large', 'medium', 'small'],
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
        sizeList: ['large', 'medium', 'small'],
      });

      return {
        ...toRefs(state),
      };
    },
  });

</setup>
-->

:::

Tipos

Soporta imágenes, iconos o caracteres.

:::demo

<template>
  <div class="demo-type">
    <div>
      <el-avatar icon="el-icon-user-solid"></el-avatar>
    </div>
    <div>
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>
    </div>
    <div>
      <el-avatar> user </el-avatar>
    </div>
  </div>
</template>

:::

Fallback cuando se produce un error de carga de imagen

Fallback cuando se produce un error de carga de imagen

:::demo

<template>
  <div class="demo-type">
    <el-avatar :size="60" src="https://empty" @error="errorHandler">
      <img
        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
      />
    </el-avatar>
  </div>
</template>
<script>
  export default {
    methods: {
      errorHandler() {
        return true
      },
    },
  }
</script>
<!--
<setup>
  import { defineComponent } from 'vue'
  export default defineComponent({
    setup() {
      const errorHandler = () => true;
      return {
        errorHandler,
      };
    },
  });
</setup>
-->

:::

Cómo encaja la imagen en su contenedor

Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que object-fit.

:::demo

<template>
  <div class="demo-fit">
    <div class="block" v-for="fit in fits" :key="fit">
      <span class="title">{{ fit }}</span>
      <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      }
    },
  }
</script>
<!--
<setup>

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      });

      return {
        ...toRefs(state),
      };
    },
  });
</setup>
-->

:::

Atributos

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
icon	establece el tipo de representación a Icono, más información en Componente Icon	string
size	Establece el tamaño del avatar	number/string	number / large / medium / small	large
shape	establece la forma del avatar	string	circle / square	circle
src	la dirección de la imagen para un avatar de imagen	string
srcSet	Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice.	string
alt	Este atributo define una descripción de texto alternativo de la imagen	string
fit	establece cómo encaja la imagen en su contenedor para un avatar de imagen	string	fill / contain / cover / none / scale-down	cover

Eventos

Nombre	Descripción	Parámetros
error	cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado	(e: Event)

Slot

| Nombre | Descripción | | default | personalice el contenido del avatar |