在vue中如果头像为空时用姓名第一个字当头像

冰海恋雨.

于 2023-11-09 15:43:15 发布

阅读量532

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64590669/article/details/134313340

版权

文章介绍了在个人资料或用户头像为空时，如何使用JavaScript代码`scoped.row.name.charAt(0)`从用户名字中获取第一个汉字作为默认头像的示例。通过``组件实现显示。

摘要由CSDN通过智能技术生成

业务场景:当个人资料或者用户头像没有图片时，默认使用户名字中第一个汉字做头像。

效果图：

完整代码：

 <el-avatar
    size="large"    
    style="width: 45px; height: 45px; line-height: 45px; font-size: 24px"
    v-if="scoped.row.head_img == null"
>
    {{ scoped.row.name.charAt(0) }}
</el-avatar>

当头像为null时获取到姓名的第一个字。
重要代码：
scoped.row.name.charAt(0)
该代码是用来截取姓名的第一个字

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冰海恋雨.

关注关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
在vue中如果头像为空时用姓名第一个字当头像

在vue中如果头像为空时用姓名第一个字当头像
复制链接

扫一扫

vue用户没有头像用姓名首字母做头像

zhengyun1568的博客

11-28

2310

avatar.js /** *@param widths 画布宽 *@param heights 画布高 *@param fontSize 字体大小 *@param id canvas id值 *@param className img ID值或者类名 *@param name 用户名 *@param index 索引值 */ export function draw(widths,heights...

vue截取用户名字做头像

liyiliang123的博客

04-18

982

用户名和头像信息都在userInfo里，判断有avatar,则读取头像地址，没有则截取名字做头像

1 条评论您还未登录，请先登录后发表或查看评论

vue用户头像地址为““时，用姓名首字母做头像

qq_41580802的博客

10-14

1644

vue用户头像地址为""时，用姓名首字母做头像

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

weixin_41916653的博客

05-14

7920

因为项目需要当用户没有头像照片把用户名当作默认头像的需求实现过程如下安装 vue-avatar 的插件在自己项目下运行下面的命令 npm install vue-avatar 安装好之后在需要使用该插件的地方引入组件 import Avatar from 'vue-avatar' export default { name:'name', components:{ Avatar }, } 引入之后使用组件 username：属性为当没有图片时候默认的文字做头像 s

vue中根据用户昵称首字母生成头像和颜色

ju__ju的博客

05-29

6260

需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机例如: 1.安装头像插件 npm install vue-avatar 2.引用 //template部分 <Avatar :username="name" :src="name" :background-color="extractColorByName(name)" color="#fff" style="vertical-

vue.js 2的一种优雅且易于使用的字母头像组件

cuk5239的博客

07-20

422

Vue字母头像 (vue-letter-avatar) An elegant and easy to use letter avatar component for vue.js 2.0+ 适用于vue.js 2.0+的优雅且易于使用的字母头像组件翻译自: https://vuejsexamples.com/an-elegant-and-easy-to-use-letter-avatar-...

详解vue更改头像功能实现

10-17

在探讨Vue更改头像功能的实现时，首先需要了解前端技术栈中Vue.js框架的基本使用方法。Vue.js是一个构建用户界面的渐进式框架，允许开发者通过声明式的方式将数据绑定到DOM元素中。在实现更改头像的需求中，会涉及到...

基于Vue实现的国庆微信头像在线生成网站源码，有多个国庆模版可供选择

09-25

本文将详细解析基于Vue.js实现的国庆微信头像在线生成网站源码，帮助读者深入了解Vue.js框架在实际项目中的应用，以及如何结合微信接口来创建互动性应用。首先，Vue.js是一个轻量级的前端JavaScript框架，以其易学...

头像加口罩小程序源码，基于uniapp使用vue开发.zip

05-25

【标题】"头像加口罩小程序源码，基于uniapp使用vue开发.zip"是一个压缩包，其中包含了使用Vue.js框架和uniapp平台开发的小程序源代码。uniapp是一个跨平台的移动应用开发框架，它允许开发者用一套代码库来构建iOS、...

node+vue实现用户注册和头像上传的实例代码

01-02

最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下数据库我使用的是MongoDB。...前端框架使用的是vue.js，ajax使用的是vue的组件vue-resource。前端上传代码如下: <!--

vueavatar显示用户头像的功能的vuejs组件

08-08

vue-avatar这个组件提供显示用户头像的功能，如果用户不提供图片，它将显示用户的首字母缩写。

Vue中img的src是动态渲染时不显示的解决

01-19

项目采用vue开发，本人也是第一次在实际项目中使用vue。自然而然采用条件渲染，我的代码如下：保存运行查看，发现没显示默认的图片，审查元素发现图片没有被打包有点懵~ 后来查阅资料发现图片使用require引入...

Vue 移动端实战九编辑用户资料、修改呢称、生日、性别、头像、以及头像的剪裁器依赖使用、Content-Type 要求的 multipart/form-data 格式

m0_55170432的博客

06-26

1685

编辑用户资料 1.0 创建组件并配置路由 1、创建 views/user/index.vue <template> <div> <van-nav-bar title="个人信息" left-arrow right-text="保存" /> <van-cell-group> <van-cell title="头像" is-link> <van-image round

Vue项目中使用Multiavatarjs生成自定义随机头像-demo

最新发布

JackieDYH的博客

10-23

1671

前者使用简单一点提供的有api，后者更类似一个项目主要使用Multiavatar去实现随机生成头像的功能使用很简单，把js下载保存到项目中，然后在html文件引入，即可全局使用。

用户名第一个字符设置为默认头像

qq_38158746的博客

06-02

1189

用户名第一个字符设置为默认头像基础实现方法问题解决最终实现基础实现方法 //html <canvas style="background: pink;"></canvas> //js let haha = "haha"; let canvas = document.querySelector("canvas"); let oCtx = canvas.getContext("2d"); canvas.width = 40; canvas.height = 40; let str =

纯前端生成设置头像 - 基于Vue3、Ts、Vite

petertanjinjie的博客

12-02

1223

开头最近要研究有什么新奇的产品和项目，发现一个网站很有意思，可以纯前端一键随机生成头像，刚好他们的代码是开源，并且基于vue3，我想开源拿出来给大家分享。效果：开始项目本身基于vue3...

第十三篇 VUE中使用头像插件 multiavatar，超级有趣的头像生成插件，提升开发的乐趣

Yzt_199626的博客

05-27

1858

最近在开发中，看到一个很有趣的插件-multiavatar，查看了一下官方，功能很强大，能够依据输入的内容，随机进行生成一个头像，觉得特别的有乐趣，特在这分享一下。官方地址：multiavatar 官方地址以下是个人在 VUE 中写的一个简易 demo, 效果如下：废话不多说，直接说下怎么在 vue 中使用。 1. npm 安装multiavatar npm install @multiavatar/multiavatar -S 2. 简单的一个 demo <tem..

vue随机头像与昵称

lss0555的博客

01-18

2615

一、随机头像 1.组件 identicon.js（哈希头像生成器） Identicon 在很多地方都可以看到，比如Github,Stackoveflow … 当给定相同的哈希值时，它将产生与GitHub相同的形状和（几乎）相同的颜色。支持PNG和SVG输出格式。 GitHub地址：https://github.com/stewartlord/identicon.js 2.使用 npm install identicon.js --save 通过提供哈希字符串和大小来生成Identicon。 // cr

vue上传头像显示在页面中base64

酷酷的旭

11-19

5943

body部分 <img src="" style="height: 60px; width: 60px;" id="portrait"> <div class="logo"> 点击上传头像 <input type="file" class="shangchuan&quot

vue头像上传和修改

09-07

Vue头像上传和修改的实现可以分为以下几个步骤： 1. 引入第三方插件或组件：可以选择一些优秀的第三方头像上传组件，如vue-cropperjs、vue-avatar等。可以通过npm安装这些插件，并在项目中引入相应的组件。 2. 创建头像上传组件：在Vue项目中创建一个头像上传组件，该组件包含一个头像上传的文件选择框和上传按钮。同时，为了实现头像的预览功能，还需要在组件中添加一个img标签，用于显示用户选择的头像文件。 3. 头像上传事件处理：在组件的script标签中，引入头像上传组件所需要的相关方法，如上传文件的函数。可以使用axios或vue-resource等库来发送请求并上传文件到后台服务器。 4. 头像修改功能：可以在个人设置或用户信息页面中，引入头像上传组件，并预先渲染用户当前的头像。提供一个修改按钮或链接，当用户点击修改头像时，显示头像上传组件，并允许用户选择新的头像文件。当用户上传完头像并确认后，将新的头像文件保存到服务器，并更新用户的头像信息。 5. 头像预览功能：在用户选择头像文件后，可以通过FileReader对象的readAsDataURL方法将文件转换为base64编码的URL，并将该URL赋值给img标签的src属性，实现头像的预览。在上传成功后，再次更新img标签的src属性，实现头像的切换。总结：通过引入第三方插件或组件，创建头像上传组件，实现上传事件处理和头像修改功能，同时提供头像预览功能，就能够实现Vue头像上传和修改的需求。