Appearance

Return to top
On this page

Avatar 头像

基本使用

src 属性可以添加图片路径

size 可以配置头像大小

显示代码
html
<n-avatar
  :size="10"
  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>

配置圆角

round 属性配置头像的圆角

显示代码
html
<n-avatar
  round
  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>

如何适应容器框

fit 属性配置头像如何适应到容器框，同原生 object-fit

fill
contain
cover
none
scale-down
fill
contain
cover
none
scale-down
显示代码
html
<template>
  <div class="fitBox">
    <div class="item" v-for="fit in fits" :key="fit">
      <span class="text">{{ fit }}</span>
      <n-avatar
        round
        src="https://img2.baidu.com/it/u=3311458432,501503621&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        :fit="fit"
      />
    </div>
  </div>
</template>

<script setup>
  const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'];
</script>

配置边框

border 属性配置头像的边框

显示代码
html
<n-avatar
  border
  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>
<n-avatar
  border
  round
  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
/>

加载失败

errorIcon 属性配置加载失败的 icon

 
显示代码
html
<n-avatar
  src="https://yangblogimg.oss-cn-hangzhou.aliyuncs.com/assets/giraffe.jpg"
/>
<n-avatar
  errorIcon="info-circle"
  src="https://yangblogimg.oss-cn-hangzhou.aliyuncs.com/assets/giraffe.jpg"
/>

API

参数说明类型可选值默认值
src图片路径string————
size图片大小number——8,(计算方式：(size*10)px)
round圆角boolean——false
border边框boolean——false
fit图片如何适应容器框string————
alt原生 alt 属性string————
select是否可以选择boolean——false
draggable是否可以拖动boolean——false
errorIcon失败时显示的 iconstring——'close-circle'

Events

事件名称说明回调参数
load图片加载成功触发——
error图片加载失败触发——

Slots

插槽名称说明说明
error自定义失败提示