分享一个vue头像组件 vue-avatar

最新推荐文章于 2025-05-17 11:12:21 发布
最新推荐文章于 2025-05-17 11:12:21 发布
阅读量1.9w 收藏 12
点赞数 2
CC 4.0 BY-SA版权
分类专栏： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Viogs/article/details/88669555
博主在前端项目中需使用头像组件，之前自制组件不够酷炫，遂选用vue-avatar组件。文中介绍了该组件的安装方法，即使用npm install vue-avatar，还提及在vue中引入和使用，最后给出参考文档链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这两天做前端项目，用到头像，之前用的是组件是自己写的，但是不够酷炫，网上找了个头像组件vue-avatar， 感觉还是非常好用的。

安装

npm install vue-avatar

vue中引入和使用

import Avatar from 'vue-avatar'
 
export default {
  ...
  components: {
    Avatar
  },
  ...
}
<avatar username="胡鹏" background-color="#fff" color="rgb(255, 208, 75)"></avatar>

看下头像的效果，感觉咋样？

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

vue avatar_Avatar para Vue.js组件
cuk5340的博客
07-31 1041
vue avatar 头像 (v-avatar) Este componente esta altamente inspirado y basado en el trabajo de https://github.com/eliep/vue-avatar, para recuperar y mantener un componente de mucha utilidad, agradecimien...
vueavatar显示用户头像的功能的vuejs组件
08-08
vue-avatar这个组件提供显示用户头像的功能，如果用户不提供图片，它将显示用户的首字母缩写。
Vue-Avatar：一款强大的Vue.js头像组件
gitblog_00058的博客
04-15 1296
Vue-Avatar：一款强大的Vue.js头像组件 项目地址:https://gitcode.com/gh_mirrors/vu/vue-avatar 是一个专门为Vue.js框架设计的可定制化头像组件。它提供了丰富的选项和功能，让你在构建应用时轻松实现美观且个性化的头像展示。 项目简介 Vue-Avatar是一款轻量级的前端组件，允许开发者通过简单的配置就能创建带有多种形状、颜色和装饰的头像。...
开发指南114-使用el-avatar显示照片
最新发布
wangbing1125的博客
05-17 263
原以为设置el-avatar的fit属性就能搞定，根本就不起作用。4、垂直方向，调整img相对el-avatar（是个span）顶部对齐。5、水平方向，调整img相对el-avatar（是个span）居中对齐。关键点：/deep/ .el-avatar img 用这个定位img。2、按照片比例，设el-avatar内部img大小，如50*65。6、调整el-avatar的背景色和照片背景色一致。1、设置el-avatar大小，例如55*55。1、el-avatar默认是个方形的。3、fit属性用fill！
Vue3头像（Avatar）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
08-15 2722
用来代表用户或事物，支持：三种尺寸、两种形状；自定义大小；自定义背景色；自定义图标、图片或字符展示；配合徽标使用；响应式尺寸；链接跳转；总之，功能丰富，简单易用，总能满足你的想象😁
vue头像
qq_44712550的博客
12-27 273
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
vue-avatar:vue.js的头像组件
05-11
Vue头像 vue.js的头像组件。 该组件显示头像图像，如果未提供，则回退到用户姓名缩写。 该组件的灵感来自 。 用于计算用户姓名首字母的规则： 将用户名划分为空格和连字符 使用每个部分的首字母 切勿使用超过三个字母的首字母 如果用户名分为三部分，且部分名称以大写字母开头，则跳过部分以小写字母开头。 您可以在找到一些示例和文档 安装 npm install vue-avatar 版本 Vuejs版本 Vue头像版本 ^ 1.0.18 ^ 1.3.0 ^ 2.0.0 ^ 2.0.0 用法 vue-avatar是一个UMD模块，可以在CommonJS和AMD模块化环境中用作模块。 在非模块化环境中，Avatar将被注册为全局变量。 ES6 import Avatar from 'vue-avatar' export default { ... components
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
:girl: 一个简单而优雅的头像裁剪和上传插件。 正在安装 $ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " ...
vue-letter-avatar-vue.js的简单优雅的字母头像组件-Vue.js开发
05-27
vue-letter-avatar简介用于vue.js 2.0+的优雅易用的字母头像组件安装$ yarn add vue-letter-avatar或$ npm instal vue-letter-avatar简介vue.js 2.0+安装$ yarn添加vue-letter-avatar或$ npm install vue-letter-...
Vue Avatar Cropper - :girl: 一个简单而优雅的头像裁剪和上传插件。
06-08
Vue Avatar Cropper 作为一个专注于头像裁剪和上传的 Vue 插件，简化了前端图片处理的复杂性，使开发者能够快速构建具有高质量用户体验的图像编辑功能。它的易用性和灵活性使其成为 Vue.js 开发者处理图像裁剪需求...
avatio-avatar Avatioavatio-avatar-图示化身的Vue组件-由Avatio使用-Vue.js开发
05-27
灵感来自Avataaars，这是一个类似React的项目。 功能SVG可配置可扩展如何使用首先，您必须通过yarn或npm安装程序包，例如，yarn添加avatio-avatar然后，您可以使用组件从“ avatio-avatar”导入Avatar {Config}； ...
vue-avatar:VueJS 2.0的头像组件
05-15
Vue头像 VueJS 2的头像组件 使用用户名创建字母头像（最多3个字符） 如果提供了图片src，将尝试将其用作头像 图像是延迟加载的。 如果未成功加载，则将不使用它（字母头像作为后备） 安装 npm install --save @lossendae/vue-avatar 用法 ES6 import Vue from 'vue' import VueAvatar from '@lossendae/vue-avatar' // If not installed globally export default { ... components : { VueAvatar } , ... } 普通JS const Vue = require ( 'vue' ) const VueAvatar = require ( '@loss
vue-avatar, vue.js的化身组件.zip
09-17
vue-avatar, vue.js的化身组件 vue头像 vue.js.的化身组件这里组件显示一个头像图像，如果没有提供给用户的姓名缩写。 这个组件来自于 react-user-avatar 。用于计算用户姓名首字母的规则：在空格和连字符上划分用户名使用每个部件的第一
vue 更改头像功能实现
06-21
vue 更改头像功能实现的代码，一个简单的HTML文件，直接引用vue文件进行编写
vue使用姓名做默认头像 vue-avatar
weixin_41916653的博客
05-14 8674
因为项目需要当用户没有头像照片把用户名当作默认头像的需求 实现过程如下 安装 vue-avatar 的插件 在自己项目下运行下面的命令 npm install vue-avatar 安装好之后在需要使用该插件的地方引入组件 import Avatar from 'vue-avatar' export default { name:'name', components:{ Avatar }, } 引入之后使用组件 username：属性为当没有图片时候默认的文字做头像 s
Vue-Avatar：轻量级Vue.js头像组件
gitblog_01275的博客
10-18 472
Vue-Avatar：轻量级Vue.js头像组件 vue-avatar An avatar component for vue.js 项目地址: https://gitcode.com/gh_mirrors/vu/vue-avat...
在vue中封装一个头像的组件
月来better
04-24 657
需求分析： 1.根据图片路径，展示不同的图片 2.图片大小 封装组件—》Avatar <template> <div> <img class="avatar-img" :src="url" :style="{ width: size + 'px', height: size + 'px' }" /> </div> </template> <script> export de
Vue项目中用户的头像展示
weixin_48837605的博客
09-01 4264
效果展示: element中已经有对应的组件了,直接封装成公用的组件使用即可 在@/components/UploadImage/index.vue(注意我们要自定义上传,并上传到第三方服务器中,所以使用http-request,使用他的时候不要用on-success了) 标记: show-file-list:是否 显示上传的文件列表 action:"#"用来指定文件要上传的地址,由于我们需要定制上传动作,这里设为#,element中的地址是 测试地址 :...
一个简单的 Vue 头像选择器
u011352988的博客
08-31 717
一个简单的 Vue 头像选择器 Preface 项目中需要一个头像选择器，但经过调研，市面上的头像选择器（或者图片截取器）一方面风格固定，无法所用组件库风格融合，另一方面，为了做到尽善尽美，大家为选择器预设了许许多多的属性，这对于选择器本身而言是一种增强的效果，但对于具体的项目而言有些过重。于是实现一个简单、可定制（通过 slots）的头像选择器的想法忽然诞生。 Example 不融入任何组件库时，头像选择器长这样： 在 vuetify 中，定制后： Principle & Implement
Vue.js头像组件vue-avatar的使用与安装
标题中提到的知识点是“vue-avatar”，这是一款专为Vue.js框架设计的头像组件。...了解以上知识点后，开发者应该能够对vue-avatar头像组件有一个全面的认识，并有效地将其集成到自己的Vue.js项目中。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值