element ui 头像组件el-avatar 无法使用本地静态资源解决方案

最新推荐文章于 2024-09-30 09:58:46 发布
最新推荐文章于 2024-09-30 09:58:46 发布
阅读量1.7k 收藏 4
点赞数 1
分类专栏： 前端 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iLzn_/article/details/128708783
版权

使用element ui 头像组件el-avatar 时想用本地静态图像，发现写完路径后左侧无法正常显示图片
左侧头像无法正常显示
错误写法，图片无法正常显示

<el-avatar
              shape="square"
              src="../../assets/img/userHeader/testImg.jpg"
              alt="图片挂了"
              :size="70"
 ></el-avatar>

替代写法,图片正常显示

<img src="../../assets/img/userHeader/testImg.jpg" alt="">

使用element ui 的解决办法
引入路径

import testImg from "../../assets/img/userHeader/testImg.jpg";

在这里插入图片描述
在这里插入图片描述

头像正常显示
在这里插入图片描述

杉树下的松子
关注
专栏目录
element-ui element-plus avatar - 分析
huxianc的博客
12-01 1769
源代码地址 <template> <span :class="avatarClass" :style="sizeStyle"> <!-- 先判断是否有 src 地址，有再判断是否加载成功 --> <img v-if="(src || srcSet) && !hasLoadError" :src="src" :alt="alt" :srcset="srcSet" :st.
vue-element-admin源码解读——项目组件布局及状态管理
星留影的刹那间
06-10 4568
vue-element-admin作为一款优秀的前端解决方案，整个框架的结构非常清晰，同时利用Vuex和Vue Router来实现SPA(单页面应用)开发模式，只需要简单的编写组件和配置文件即可完成项目的初步搭建，这对某些需要简单的前端界面的团队无疑是个福利。不过对于需要高度自定义的公司可能还需要更加深入的了解一下，所以这篇文章将带你一步步的摸索整个项目的组件是如何加载的。 基础页面 要摸索当然首先就要找到入口，对于界面而言当然就是index.html的作为入口了。 public\index.html &l
解决Element UI的Avatar 头像组件引用图片的问题
Tiger_Paul的博客
02-19 6309
解决Element UI的Avatar 头像组件引用图片的问题
ant design a-avatar 使用本地图片
最新发布
qq_32880013的博客
09-30 171
【代码】ant design a-avatar 使用本地图片。
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
weixin_44326167的博客
08-08 4421
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
el-avatar组件显示本地图片资源
热门推荐
小何程序员的博客
12-08 1万+
el-avatar组件显示本地图片资源场景发生的问题原因解决方案 场景 我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片 于是我直接写上这个相对路径 发生的问题 结果发现无法显示 但是下面的img标签却能够正常显示 原因 后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片
解决el-avatar及el-image本地路径的图片不显示问题
weixin_50559423的博客
08-23 249
项目中有个上传用户头像的功能，但是不是必填项，不上传的话显示默认头像，默认头像配置在asset目录下面。组件，发现使用本地图片路径无法显示，但是使用原生img标签却能显示。
Vue 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 3134
Vue 使用 el-avatar 头像无法直接加载本地图片问题
SpringBoot 整合文件上传 elment Ui 上传组件
个人学习使用
06-28 314
项目的目录结构： 页面效果 所使用的依赖 后端代码 controller 解析代码 这样就上传成功啦 那么 我们该如何去访问这个图片呢？
[vue-element-admin]实现登录和注销操作
u013998349的博客
11-27 4363
vue-element-admin实现登录和注销操作==登录-获取token令牌操作实现==src/views/login/index.vuesrc/store/modules/user.js比较注意的是api中的每一次axios请求，都会进行返回值的拦截：==getInfo-获取登录用户信息操作实现==src/views/adshboard/index.vuesrc/store/modules/user.js==注销-登录用户操作实现==src/layout/components/Navbar.vuesr
element ui图片上传预览
weixin_44542401的博客
08-27 1633
参考：https://blog.csdn.net/weixin_44012722/article/details/106787282?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163005236716780264015137%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=163005236716780264015137&bi
el-avatar 头像切换不显示
01-19
Element UI+Vue踩坑实录：组件下头像切换不显示 使用做头像的时候后，发现切换后原有的头像都不显示了。头像不更新&hellip;数据更新之后，图片并没有更新，而且报了404的错，数据里有头像还好，一旦有一条数据头像为空，那么在此局部刷新的时候有头像数据的也不会显示了。简而言之就是： 数据更新之后，DOM绑定的图片不会变 经过多方查询，解决的办法： :key=common.imgPath + userInfo.picture 加上这一句之后，就能解决DOM的图片不变的问题。 也就是说在 :src后面加上:key值，值就是你:src的值。”
vue+elementUI
09-07
3. **数据展示组件**: Table表格、Tag标签、Avatar头像、Badge徽标等，用于数据展示和美化。 4. **导航组件**: NavMenu导航菜单、Breadcrumb面包屑、Pagination分页、Steps步骤条、Tabs标签页等，帮助构建页面导航...
ElementUI使用头像组件el-avatar报错GET http://localhost:8080/assets/imgs/001.jpg 404 (Not Found)
LanseMOgang的博客
10-26 1603
ElementUI使用头像组件el-avatar拿不到图片
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
qq_45706352的博客
03-15 3992
在 element 组件上使用相对路径时 webpack 不会对路径进行处理，导致请求了一个无效的路径。【附】：:src属性后面的字符串会被当做变量解析使用，而src属性后面的只会被当字符串使用。在网页中加载本地图片时，会出现图片加载失败的问题，但使用。（注意给 src 属性加 : ）
el-avatar插入本地图片三步走
qq_63123724的博客
05-23 424
第一步，导入本地位置。
图片或者el-avatar头像组件 获取图片信息手动添加认证信息(token/Authorization)
李十三的博客
04-08 439
原先项目中的图片资源是没有添加鉴权的，也就是说假如后端返回给你一个头像图片的资源地址为:"/XXX/file/Image/userAvatar/207.jpg"，此时浏览器自动请求到了这张图片对应的图片资源，但是这时候你将资源后面的207改成208，那同样的，如果数据库中含有"/XXX/file/Image/userAvatar/208.jpg"的资源，那么你就能够顺利的拿到这张图片的资源，但是对于部分图片资源来说，可能是隐私资源，后端并不想让没有这张图片权限的人来获取这张图片的信息，于是后端加上了鉴权。
el-avatar组件头像切换不更新问题
爱学习的大雄的博客
12-08 760
起初想的是不是接口没有及时返回图片url，经过不断的测试，发现如果页面进来的时候只要头像加载成功了，那么再去修改头像，头像是会自动刷新的。然后就去翻看了dom信息，发现当头像加载失败时，dom是没有头像img标签的，加载成功就存在img标签。查看发现有，我就想是不是标签的问题，我同样适用。组件头像作为展示图片，第一页是有图片的，在点击第二页，重新切换为第一页时，发现第一页的图片不展示。示例：刚进页面的时候图片可以显示，但是查询后显示不出来了（下图是我修改完成后的）标签放，发现图片正常显示，那就是。
element ui el-avatar 源码解析零基础逐行解析
qq_42389674的博客
12-20 1989
element ui avatar的源码解析，img图片处理解决方案
el-avatar 组件
06-03
el-avatar 组件是 ElementUI 组件库中的一个头像组件，用于显示用户的头像。它可以根据传入的参数设置头像的大小、形状、图片等属性。 常用的属性有： - size：头像的大小，可以是数字、字符串或者是 ElementUI 定义的尺寸常量（例如：large、medium、small、mini）； - icon：头像的图标，可以是字符串或者 ElementUI 的图标组件； - shape：头像的形状，可以是圆形（circle）或者方形（square）； - src：头像的图片地址，可以是本地图片地址或者是远程图片地址。 例如，下面的代码可以显示一个大小为 40 像素、圆形、带有默认头像的 el-avatar 组件： ```html <el-avatar :size="40" shape="circle" icon="el-icon-user"></el-avatar> ``` 需要注意的是，如果同时设置了 icon 和 src 属性，优先显示 src 属性指定的图片。如果两个属性都没有设置，则显示默认头像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值