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

最新推荐文章于 2024-04-02 18:03:01 发布
最新推荐文章于 2024-04-02 18:03:01 发布
阅读量1.3k 收藏 3
点赞数 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";

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

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

杉树下的松子
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 2755
Vue 使用 el-avatar 头像无法直接加载本地图片问题
element-ui avatar 组件源码分享
最新发布
qq_37309987的博客
04-02 626
2.7 fit 属性，当展示类型为图片的时候，设置图片如何适应容器框，类型 string，fill / contain / cover / none / scale-down，默认 cover。2.2 size 属性，设置头像的大小，类型 number/string，number / large / medium / small，默认 large。2.1 icon 属性，设置头像的图标类型，参考 Icon 组件，类型 string，无默认值。2、avatar 组件属性。二、avatar 组件属性。
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
weixin_44326167的博客
08-08 3910
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
el-avatar 头像切换不显示
01-19
Element UI+Vue踩坑实录：组件下头像切换不显示 使用做头像的时候后，发现切换后原有的头像都不显示了。头像不更新&hellip;数据更新之后，图片并没有更新，而且报了404的错，数据里有头像还好，一旦有一条数据头像为空，那么在此局部刷新的时候有头像数据的也不会显示了。简而言之就是： 数据更新之后，DOM绑定的图片不会变 经过多方查询，解决的办法： :key=common.imgPath + userInfo.picture 加上这一句之后，就能解决DOM的图片不变的问题。 也就是说在 :src后面加上:key值，值就是你:src的值。”
el-avatar组件显示本地图片资源
热门推荐
小何程序员的博客
12-08 1万+
el-avatar组件显示本地图片资源场景发生的问题原因解决方案 场景 我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片 于是我直接写上这个相对路径 发生的问题 结果发现无法显示 但是下面的img标签却能够正常显示 原因 后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片
ElementUI使用头像组件el-avatar报错GET http://localhost:8080/assets/imgs/001.jpg 404 (Not Found)
LanseMOgang的博客
10-26 1446
ElementUI使用头像组件el-avatar拿不到图片
el-avatar组件头像切换不更新问题
爱学习的大雄的博客
12-08 677
起初想的是不是接口没有及时返回图片url，经过不断的测试，发现如果页面进来的时候只要头像加载成功了，那么再去修改头像，头像是会自动刷新的。然后就去翻看了dom信息，发现当头像加载失败时，dom是没有头像img标签的，加载成功就存在img标签。查看发现有，我就想是不是标签的问题，我同样适用。组件头像作为展示图片，第一页是有图片的，在点击第二页，重新切换为第一页时，发现第一页的图片不展示。示例：刚进页面的时候图片可以显示，但是查询后显示不出来了（下图是我修改完成后的）标签放，发现图片正常显示，那就是。
element-ui element-plus avatar - 分析
huxianc的博客
12-01 1683
源代码地址 <template> <span :class="avatarClass" :style="sizeStyle"> <!-- 先判断是否有 src 地址，有再判断是否加载成功 --> <img v-if="(src || srcSet) && !hasLoadError" :src="src" :alt="alt" :srcset="srcSet" :st.
ui-avatar-svg:在纯JS中使用用户首字母生成SVG化身
05-28
用法使用灵活的API生成头像： const UIAvatarSvg = require ( 'ui-avatar-svg' ) ;const svg = ( new UIAvatarSvg ( ) ) . text ( 'AB' ) . size ( 64 ) . bgColor ( '#ff0000' ) . textColor ( '#ffffff' ) . ...
react-native-user-avatar:React Native的头像组件
05-02
准用户头像显示，支持回退到在彩色背景上使用用户的姓名缩写作为头像。 基于React的强大库： : ，并移植到React Native。 iOS萤幕撷取画面 Android屏幕截图 安装 npm install --save react-native-user-avatar或...
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
Vue头像作物 :girl: 一个简单而优雅的头像裁剪和上传插件。 正在安装 $ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ ...
Element ui Avatar头像管理组件 实现当用户没有头像时 以名称最后一个字为头像
weixin_45966674的博客
01-29 1289
因为上面 我们定义了 他的 class 为 avatar 然后我们通过这个类名 定义他的样式 和他下面图片 img的样式。其实这个组件自己做也比较简单 就是判断 如果src没传进来 展示下面的文本就好了 但element ui这有个现成的。这里我们用v-if 判断 如果item.images有值 代表是有头像的 就直接用src。可以看到 没有头像的 对应位置就会展示出 名字的最后一个字。简单说 就是取传进来的值 的最后一个字。src控制他的图片展示。
element源码解析(5) -- Avatar
kunyao8536的博客
02-14 1018
Avatar头像,functional props 总共8个属性,分别是 尺寸size 形状shape 图标icon 自定义图片src 未加载提示alt 尺寸设置图片 srcSet 错误回调函数error 图片object-fit样式属性值 size 可以为字符串或者数字,如果是字符串的话,那么只可以为大中小 size: { type: [Number, String], validator(val) { if (typeof val === 'string')
解决Element UI的Avatar 头像组件引用图片的问题
Tiger_Paul的博客
02-19 5680
解决Element UI的Avatar 头像组件引用图片的问题
element-UI 使用icon图标或者avatar 头像不显示问题 解决
喜欢吃糖丶的博客
03-25 3170
问题 昨天在写项目的时候，想用avatar 显示头像但是一直不能显示，但是能显示出地标的icon，当我用一模一样的代码使用user的icon的时候，发现又没有显示 跟官网对比了半天的代码发现并没有什么区别，并且有能实现出来的icon，使得我百思不得其解。 机缘 作为一个成熟的后端，是有Ctrl+鼠标左键看源码的习惯的，当我Ctrl 鼠标移到地标的icon的时候发现是能点进去跳转到源码文件的，但是avatar 却不行。就马上想到会不会是element版本问题，我用的版本低了？那个版本还没有这些图标的？ 过
运用el-avatar显示图片/头像
前端职场小白_炜晨科技的博客
09-30 3804
运用el-avatar显示图片/头像
el-avatar入门学习
qq_40765784的博客
06-17 4034
el-avatar入门使用
vue3++elementplus+vite显示本地图片
jidaotianzun的博客
09-21 761
今天写项目时需要将本地图片在页面上展示，希望使用el-image组件展示，img倒也可以。由于要预览图片，所以使用el-image更方便一点。这样引入很笨，但是确实解决了问题，不仅可以使用变量保存，而且也支持img的:src和el-image的src的使用。固然，使用img的src=本地图片的相对/绝对路径可以显示图片，但是预览时就不行了，还是没有解决问题。问题：img只能直接写路径，使用变量保存路径，然后img的:src=变量名--无法加载。仅作记录，以供后用和网友参考。需求：展示本地图片并可以预览。
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、付费专栏及课程。

余额充值