element-ui中avator插件关于头像显示的问题

最新推荐文章于 2024-01-16 11:01:37 发布

爱编程的小菜鸡

最新推荐文章于 2024-01-16 11:01:37 发布

阅读量459

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74342804/article/details/134951842

版权

问题发现

最近在写通用后台管理时，设置用户头像的显示，由于自己用的是本地资源文件（文件路径..\src\assets\1666758601547.png），发现配合avator使用会自动配置http进行get请求，用原生的image标签也是这样。于是开始收集资料尝试解决。

问题解决

通过网上收集资料发现，动态绑定（后端传给前端）的图片地址会自动走网络get请求，所以后端传入头像地址只能是以网址的形式，不能使用本地图片，可以考虑阿里云存储服务。

不走后端请求却也是动态绑定本地图片的话可以参考以下方式：

1.动态绑定src属性

2.采用ES6方式引入本地文件资源

这样就可以动态绑定啦！

总结

1.后端发送的头像资源必须走网络请求，无法使用本地的图片资源

2.要想使用本地的图像资源作头像，就不能用后端数据库传入的形式

文章纯属记录，如有不足，还望大佬指正

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱编程的小菜鸡

关注关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
element-ui中avator插件关于头像显示的问题

1.后端发送的头像资源必须走网络请求，无法使用本地的图片资源2.要想使用本地的图像资源作头像，就不能用后端数据库传入的形式文章纯属记录，如有不足，还望大佬指正。
复制链接

扫一扫

element-UI 使用icon图标或者avatar 头像不显示问题解决

喜欢吃糖丶的博客

03-25

3279

问题昨天在写项目的时候，想用avatar 显示头像但是一直不能显示，但是能显示出地标的icon，当我用一模一样的代码使用user的icon的时候，发现又没有显示跟官网对比了半天的代码发现并没有什么区别，并且有能实现出来的icon，使得我百思不得其解。机缘作为一个成熟的后端，是有Ctrl+鼠标左键看源码的习惯的，当我Ctrl 鼠标移到地标的icon的时候发现是能点进去跳转到源码文件的，但是avatar 却不行。就马上想到会不会是element版本问题，我用的版本低了？那个版本还没有这些图标的？过

【区分vue2和vue3下的element UI Avatar 头像组件，分别详细介绍属性，事件，方法如何使用，并举例】

最新发布

xiejunlan的博客

07-03

753

在 Vue 2 和 Vue 3 中，Element UI 和 Element Plus 提供了 Avatar 头像组件，用于显示用户的头像或图标。然而，需要注意的是，在 Vue 2 中通常使用 Element UI，而在 Vue 3 中则使用 Element Plus。这两个库在 Avatar 组件的实现上可能会有一些细微的差别，但基本概念和用法是相似的。

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

ElementUI头像上传成功前端无法显示

m0_61895786的博客

01-16

448

elementUI头像上传组件新增操作时变量为空，没有这个属性导致上传成功却无法显示图片但是修改存在的记录就可以正常显示，来个佬指点一二。

ElementUI浅尝辄止18：Avatar 头像

渣渣砖

09-03

2505

用图标、图片或者字符的形式展示用户或事物信息。常用于管理系统或web网站的用户头像，在用户账户模块更换头像操作也能看到关于Avatar组件的应用。

vue、elementui组件

Meng_000000的博客

02-26

1202

table表格显示数据时，特定行增加背景颜色使用table组件的row-style属性，用该属性绑定一个函数，在函数中写自己的判断逻辑，注意，函数的返回值必须是一个对象的形式，然后里面是两个字符串； cell-style和header-cell-style属性用来设置标题、以及标题对应的该列数据居中对齐 <el-table :data="tableData" class="mb15" :cell-style="{ textAlign: 'c

【Vue】vue3 动态设置 src 地址方法

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

10-17

1008

<img class="logo-srkg" :src="getImgUrl('hwtm.png')" alt="" /> const getImgUrl = (src: string): string => { return new URL(`../assets/res-kg/${src}`, import.me...

element-ui 离线中文文档api下载版本2.4

09-19

7. **数据展示组件**：Table（表格）、Tag（标签）、Avatar（头像）、Badge（徽标）、Progress（进度条）、Card（卡片）、Collapse（折叠面板）、Tree（树形结构）等，用于数据的展示和管理。离线文档 API 包中，...

版本2.4 element-ui 离线中文文档api

01-05

4. **数据展示组件**：Table（表格）、Carousel（走马灯）、Collapse（折叠面板）、Tree（树形结构）、Avatar（头像）等，用于组织和展示数据。 5. **导航组件**：Menu（菜单）、Breadcrumb（面包屑）、Pagination...

element-ui离线文档2.15.7最新版

02-09

在 Element UI 离线文档中，你可以找到关于这个库的所有详细信息，包括组件的使用方法、属性、事件、样式以及如何进行自定义配置。离线文档的优势在于，开发者无需联网即可查阅，这对于在没有网络环境或者网络不稳定...

element-ui-api-2.x版本.zip

10-10

- **Avatar**：头像组件，可以显示图片或文字。 - **Badge**：徽标，常用于显示数量或状态。 - **Icon**：图标组件，提供了大量的矢量图标。 - **Carousel**：轮播图，可以展示多张图片或内容。 - **Collapse**...

js动态生成用户头像插件Avatars

12-11

Avatars是一款可以动态生成用户头像js插件。Avatars可以在浏览器或node.js环境中，动态生成各种漂亮的、基于svg的用户头像。

Django后端分离使用element-ui文件上传方式

09-16

- **文件上传**：利用Element UI中的`el-upload`组件来实现文件上传功能 #### 三、实现步骤 ##### 1. 导入Element UI 为了在前端项目中使用Element UI，首先需要将其引入到项目中。具体做法如下： ```html <!-- ...

解决Element UI的Avatar 头像组件引用图片的问题

Tiger_Paul的博客

02-19

6020

解决Element UI的Avatar 头像组件引用图片的问题

vue用element-ui后台springboot实现注册上传头像，登录显示头像（图片存至本地）

qq_40559984的博客

09-09

2651

思路(最后附源码）： 1.注册上传头像，用element-ui的上传组件，action为默认请求地址，必须写，由于我的项目是前后分离，要跨域，所以不用默认的action 地址，设置为#即可，auto-upload自动上传设为false，自定义点击注册按钮时再上传。 :on-change="handleChange"选择图片改变时触发此方法，我们可以在其中从fileList获得文件，然后利用 window.URL.createObjectURL(file.raw);方法生成本地文件的url.

使用element-ui使用表格展示微信头像

jxjianghailan的博客

09-09

1342

要求：使用element-ui使用表格展示微信头像借鉴的原博：https://blog.csdn.net/qq_41588568/article/details/100196905 效果图： <el-table-column label="微信头像" align="center" prop="avaterUrl"> <template slot-scope="scope"> <img :src="scope.row.avat

element-ui的用户头像上传默认显示图片

岁末zzz的博客

01-23

8457

初始时为img获取一个图片

Vue-ElementUI入门（实现table头像图片显示）

李尹豪的博客

05-19

6624

Vue-ElementUI入门（实现table头像图片显示） table中字段代码如下此处template slot-scope为固定写法(scope相当于一条数据对象) 在img中使用scope（三个属性value、row、index），通过row（本条数据的数据对象）获取src字段的值 Vue data中代码如下 src路径为自己项目中的图片路径至此项目运行则可以显示头像图片在table中 ...

element-ui上传头像

05-12

要在 element-ui 中上传头像，您可以使用 el-upload 组件。以下是一个简单的示例代码： ```html <template> <div> <el-upload class="avatar-uploader" action="/your-upload-api" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> <script> export default { data() { return { imageUrl: '' // 存储上传后的头像地址 }; }, methods: { handleSuccess(response) { // 上传成功后，将服务器返回的头像地址存储在 imageUrl 中 this.imageUrl = response.data.url; }, beforeAvatarUpload(file) { // 限制上传图片的类型和大小 const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); return false; } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); return false; } return true; } } }; </script> <style> .avatar-uploader { display: inline-block; width: 100px; height: 100px; border-radius: 50%; border: 1px dashed #d9d9d9; background-color: #f2f2f2; overflow: hidden; text-align: center; } .avatar { width: 100%; height: 100%; object-fit: cover; } .avatar-uploader-icon { font-size: 32px; color: #8c939d; line-height: 100px; } </style> ``` 在这个示例中，el-upload 组件的 action 属性指向上传头像的 API 接口。在 handleSuccess 方法中，将服务器返回的头像地址存储在 imageUrl 中，然后在模板中使用 v-if 和 v-else 来展示上传的头像或加号图标。beforeAvatarUpload 方法用于限制上传图片的类型和大小。