vue使用姓名做默认头像 vue-avatar

因为项目需要当用户没有头像照片把用户名当作默认头像的需求
实现过程如下
安装 vue-avatar 的插件 在自己项目下运行下面的命令

npm install vue-avatar

安装好之后在需要使用该插件的地方引入组件

import Avatar from 'vue-avatar'
export default {
   name:'name',
   components:{
      Avatar
    },
}

引入之后使用组件
username：属性为当没有图片时候默认的文字做头像
src:图片路径
background-color：文字头像背景
color：文字头像颜色
inline:display使用inline-flex而不是flex

 <Avatar  :username="userInfo.name"
          :src="userInfo.avatar"
           background-color="#ccc"
           color="#fff"
           style=" vertical-align: middle;"
           :inline="true">
  </Avatar>

style是我自己自定义添加的样式 为了防止用户有图像的时候跟文字跟图片没有水平居中
效果图如下

参考文档https://www.npmjs.com/package/vue-avatar