Avatar 头像

本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。

平台差异说明

基本使用

通过src指定头像的路径即可简单使用，如果传递了text参数，text将会优先起作用

注意： 请保证传递给src的是绝对地址，而不是相对地址，为什么呢？因为传入avatar组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错。

<template>
    <u-avatar :src="src"></u-avatar>
    <u-avatar :text="text"></u-avatar>
</template>
<script>
    export default {
        data() {
            return {
                src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
                text: '无头像'
            }
        }
    }
</script>

头像类型

• mode参数指定头像的类型，取值circle为圆形，取值square为圆角方形

<template>
    <u-avatar :src="src" mode="square"></u-avatar>
</template>
<script>
    export default {
        data() {
            return {
                src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
            }
        }
    }
</script>

默认头像

如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像

API

Props

Event