关于饿了吗头像avatar组件更换头像地址，不更新的问题

于 2022-06-30 12:12:24 发布 169 收藏
分类专栏： 前端 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Michael_Hzs/article/details/125538049
版权

情况是这样滴，
刚开始加载头像，如果地址是可以成功获取头像的话，再切换头像的时候是可以自动更新头像的，但是刚开始头像是获取失败状态的话，那么再切换头像，即使切换的这个头像是可以获取到的，但是头像组件没有更新。官网没有任何说明。经排查，是因为dom里面没有img这个标签了，所以给他加上个key就可以解决这个 问题了

爱撸猫的小黑人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-avatar:VueJS 2.0的头像组件
05-15
如果未成功加载，则将不使用它（字母头像作为后备）安装 npm install --save @lossendae/vue-avatar用法ES6 import Vue from 'vue'import VueAvatar from '@lossendae/vue-avatar'// If not installed ...
关于后端返回图片地址是同一个导致修改图片不显示
qq_46118650的博客
09-20 148
后端返回图片地址是同一个导致修改图片不显示
jsp页面中地址插入图片不显示问题以及路径问题解决方法
Aquilian的专栏
03-28 9663
        上图是项目的结构。我想在主页面index.jsp页面获取avatar.png这张图，在页面里使用<img src="/pages/assets/avatars/avatar.png">获取，在Eclipse编辑时，用ctrl加鼠标左键，能点进去获取到图片。然而在浏览器通过http://localhost:8080/webtest/这个地址获取时，并没有显示出图片。   ...
解决elementUI 中 el-avatar组件头像切换不更新问题
qq_36306693的博客
02-19 4988
问题描述： 当使用el-avatar组件时，如果刷新页面时，el-avatar图片加载失败了，那么el-avatar组件就会进入到失败的事件中，就像下图一样： 这时候去修改头像，那么头像修改成功了，但是图片并不会自动加载，而是需要再去刷新一下浏览器，那么这就违背了事情的初衷了。 起初想的是不是因为vuex的getter没有及时更新头像的url信息，就去查了很多相关的资料，最后还是没能解决，经过不...
el-avatar组件头像切换不更新问题
爱学习的大雄的博客
12-08 244
起初想的是不是接口没有及时返回图片url，经过不断的测试，发现如果页面进来的时候只要头像加载成功了，那么再去修改头像，头像是会自动刷新的。然后就去翻看了dom信息，发现当头像加载失败时，dom是没有头像img标签的，加载成功就存在img标签。查看发现有，我就想是不是标签的问题，我同样适用。组件头像作为展示图片，第一页是有图片的，在点击第二页，重新切换为第一页时，发现第一页的图片不展示。示例：刚进页面的时候图片可以显示，但是查询后显示不出来了（下图是我修改完成后的）标签放，发现图片正常显示，那就是。
运用el-avatar显示图片/头像
前端职场小白_炜晨科技的博客
09-30 1093
运用el-avatar显示图片/头像
（更换微信头像系统）avatar.rar
03-10
给图像加点缀，对图像制作，微信头像的制作，想怎么加就怎么加。
react-native-user-avatar:React Native的头像组件
05-02
React本机用户头像 准用户头像显示，支持回退到在彩色背景上使用用户的姓名缩写作为头像。 基于React的强大库： : ，并移植到React Native。 iOS萤幕撷取画面 Android屏幕截图 安装 npm install --save react-...
Java获取Avatar头像工具类
10-22
Java获取Avatar头像图片工具类。输入参数为Avatar注册邮箱地址，就能生成对应注册邮箱的Avatar头像链接。WordPress头像。
AvatarImage:群组头像组件
04-12
这是一个正多边形头像组件，是支持群组头像。 群组头像最多支持显示四个成员。 关于默认头像 未设置远程头像路径时，如果名字中有中文，则获取最后一个中文字符；如果没有中文，则获取第一个字符，作为头像文字 可用...
el-avatar 头像切换不显示
01-19
Element UI+Vue踩坑实录：组件下头像切换不显示 使用做头像的时候后，发现切换后原有的头像都不显示了。头像不更新…数据更新之后，图片并没有更新，而且报了404的错，数据里有头像还好，一旦有一条数据头像为空...
layui-cropper-avatar:Layui头像裁剪组件
04-30
社区组件平台已经有一个，可惜我测试中有点问题并不如意，所以就把之前用的改成layui组件，两者很相像，毕竟都是基于cropper.js(一个3.0.0，一个3.1.3)。使用NO.1使用git clone、svn checkout或直接下载压缩包等方式...
vue-avatar:vue.js的头像组件
05-11
vue.js的头像组件。 该组件显示头像图像，如果未提供，则回退到用户姓名缩写。 该组件的灵感来自 。 用于计算用户姓名首字母的规则： 将用户名划分为空格和连字符 使用每个部分的首字母 切勿使用超过三个字母的...
react-alphabet-avatar:React JS字母头像组件
05-17
React字母头像如果浏览器由于任何原因无法显示用户头像，则此组件将显示由character（alphabet）和背景组成的头像。预习用法 var React = require ( 'react' ) ;var ReactAlphabetAvatar = require ( 'react-...
auro-avatar：用于显示头像图像的自定义Web组件
02-12
支持CSS自定义属性的浏览器将立即反映出对Auro Design令牌的任何更新，而旧版浏览器将需要具有预先生成的后备属性的更新组件。在项目组件中定义依赖项在使用组件的每个组件中定义组件依赖性。 import "@alaskaairux...
优质插件 / AvatarCreator / 创建头像
03-29
1、这是一款创建头像的插件 2、可以用作个人资料图片 3、收费只是想让你们知道资源得来不易
最新精选2000+女头像.rar
02-17
最新精选2000+女头像.rar
django-avatar：用于处理用户头像的Django应用
02-05
django-avatar：用于处理用户头像的Django应用
react-initials-avatar:用于React的最小首字母头像组件
05-09
react-initials-avatar :male_sign:‍:male_sign: 由制造 捐赠： ， :red_heart: 它？ :star: 可以在或上它。 目录 用法 原料药 问题 :bug: 虫子 执照 安装 确保已安装Node.js 10或更高版本。 然后运行以下命令...
Layui圆形头像框上传头像
最新发布
02-10
可以使用Layui的upload模块实现圆形头像框上传头像的功能。首先，在HTML页面中定义一个上传按钮，然后使用JavaScript代码来配置upload模块并实现上传功能。具体步骤如下： 1. 引入Layui的CSS和JS文件： ``` <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> ``` 2. 在HTML页面中定义上传按钮： ``` <div class="layui-upload-drag" id="avatar-upload"> <i class="layui-icon layui-icon-upload"></i> <p>点击上传，或将文件拖拽到此处</p> </div> ``` 3. 使用JavaScript代码来配置upload模块并实现上传功能： ``` layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#avatar-upload', //绑定元素 url: '上传接口地址', //上传接口 done: function(res){ //上传完毕回调 }, error: function(){ //请求异常回调 } }); }); ``` 完成上面的步骤后，即可实现圆形头像框上传头像的功能。 注意：上面代码仅提供实现的大致思路，具体的实现细节可能会有所不同，请根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱撸猫的小黑人

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值