el-avatar插入本地图片三步走

最新推荐文章于 2024-08-23 17:57:58 发布
最新推荐文章于 2024-08-23 17:57:58 发布
阅读量323 收藏
点赞数 1
文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63123724/article/details/139154749
版权

第一步，导入本地位置

第二步

第三步

道狗拉斯236
关注
el-avatar 头像切换不显示
01-19
Element UI+Vue踩坑实录：组件下头像切换不显示 使用做头像的时候后，发现切换后原有的头像都不显示了。头像不更新…数据更新之后，图片并没有更新，而且报了404的错，数据里有头像还好，一旦有一条数据头像为空，那么在此局部刷新的时候有头像数据的也不会显示了。简而言之就是： 数据更新之后，DOM绑定的图片不会变 经过多方查询，解决的办法： :key=common.imgPath + userInfo.picture 加上这一句之后，就能解决DOM的图片不变的问题。 也就是说在 :src后面加上:key值，值就是你:src的值。”
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
总结一下，实现Vue+Element UI(`el-upload`)的图片压缩功能，我们需要做以下几步： 1. 定义一个通用的图片压缩函数，利用`Image`、`Canvas`和`Blob`对象进行压缩。 2. 在Vue组件中使用`el-upload`，设置`before-...
使用Avator加载本地头像失败
WORLDI的博客
06-01 1345
今天在做项目的时候遇到了一个问题，使用ant-design中的<Advator/>加载头像时报错： GET http://localhost:3000/public/image/wordli.jpg 404 (Not Found) 后来发现<Advator src="" />中的src里只能读取网上的地址，读取不到本地地址的图片,把本地地址改为网络上的地址就好了。 可以把图片上传到服务器；没有的话可以把图片上传到qq空间相册，再使用qq空间里的地址（可能会很长）。 ...
【区分vue2和vue3下的element UI Avatar 头像组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-19 818
在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中，Avatar头像组件可能并没有直接作为官方组件库的一部分。然而，为了回答你的问题，我将假设 Element UI 和 Element Plus 在未来的版本中可能添加了Avatar组件，或者我们将使用一个类似的第三方组件或自定义组件作为例子。
el-avatar组件显示本地图片资源
热门推荐
小何程序员的博客
12-08 1万+
el-avatar组件显示本地图片资源场景发生的问题原因解决方案 场景 我的使用场景是利用el-avatar组件显示assets文件夹里面的female.png图片 于是我直接写上这个相对路径 发生的问题 结果发现无法显示 但是下面的img标签却能够正常显示 原因 后来发现原因是打包的时候，由于el-avatar的src属性是自定义的属性，所以在保存的时候直接以字符串的形式保存了而不是引用的方式，等打包完以后就直接拿这个字符串放到img标签src中，但是打包后的图片地址已经发生了改变了，已经没有这个图片
Vue 使用 el-avatar 头像无法直接加载本地图片问题
幻辰科技 nbhctec.com
05-24 3018
Vue 使用 el-avatar 头像无法直接加载本地图片问题
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
weixin_44326167的博客
08-08 4319
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
element ui 头像组件el-avatar 无法使用本地静态资源解决方案
iLzn_的博客
01-16 1627
element头像组件无法使用本地静态资源解决办法
vue-avatar-cropper：一个简单而优雅的头像裁剪和上传插件
02-06
Vue头像作物 :girl: 一个简单而优雅...$ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " handleUploaded " tri
react-nice-avatar:用于生成头像的React库
08-04
React不错的头像 在线编辑/预览 资产 设计师： on Figma Figma 文件： 安装 npm install react-nice-avatar ... 渲染具有特定宽度/高度和配置的组件 < Avatar xss=removed> 要么 < Avatar xss=removed> 选项 这
initials-avatar:从用户的姓名首字母生成头像图片，非常适合用作有意义的头像回退
05-22
从用户的姓名缩写生成头像图片，非常适合用作有意义的头像回退。 例如： 用法 基本用法 为首字母JD生成一个100x100的头像： http://initials.me/jd 指定尺寸 为首字母JS生成一个50x50的头像： ...
解决el-avatar及el-image本地路径的图片不显示问题
weixin_50559423的博客
08-23 77
项目中有个上传用户头像的功能，但是不是必填项，不上传的话显示默认头像，默认头像配置在asset目录下面。组件，发现使用本地图片路径无法显示，但是使用原生img标签却能显示。
el-avatar 组件在vue项目部署后图片无法显示（解决办法）
weixin_38345306的博客
08-10 2565
el-avatar 组件在vue项目部署后图片无法显示（解决办法）
【Vue】关于开发中本地图片加载失败的经验总结
NineWaited的博客
06-07 8790
关于vue网页的开发过程遇到本地图片加载失败的解决方法
解决Element UI的Avatar 头像组件引用图片的问题
Tiger_Paul的博客
02-19 6143
解决Element UI的Avatar 头像组件引用图片的问题
uniapp小程序实现海报下载图片到手机本地
weixin_42711805的博客
06-15 971
【代码】uniapp小程序实现海报下载图片到本地。
element-ui框架下el-avatar头像图片裁剪
Alt_crtl的博客
03-18 610
自用的el-avatar标签头像裁剪上传
运用el-avatar显示图片/头像
前端职场小白_炜晨科技的博客
09-30 4005
运用el-avatar显示图片/头像
el-avatar结合el-dropdown-menu实现下拉菜单
最新发布
08-27
`el-avatar` 和 `el-dropdown-menu` 是 Element UI 组件库中的两个组件，分别用于显示用户头像和下拉菜单。将这两个组件结合起来实现下拉菜单，通常是想要在点击头像时显示一个包含多个选项的下拉菜单，以便用户进行选择。 以下是结合使用 `el-avatar` 和 `el-dropdown-menu` 实现下拉菜单的基本步骤： 1. 首先确保你的项目中已经安装并引入了 Element UI。 2. 在你的组件中添加一个 `el-dropdown` 标签，并设置其 `trigger` 属性为触发下拉菜单的方式，如 `click` 或 `hover`。 3. 在 `el-dropdown` 内部，将 `el-avatar` 组件添加进去作为触发元素。 4. 然后添加 `el-dropdown-menu` 和 `el-dropdown-item` 组件来定义下拉菜单的内容和选项。 下面是一个简单的代码示例： ```html <template> <el-dropdown trigger="click"> <el-avatar slot="reference" size="large" :src="avatarUrl">U</el-avatar> <el-dropdown-menu slot="dropdown" class="dropdown-menu"> <el-dropdown-item>选项1</el-dropdown-item> <el-dropdown-item>选项2</el-dropdown-item> <el-dropdown-item>选项3</el-dropdown-item> <!-- 更多选项 --> </el-dropdown-menu> </el-dropdown> </template> <script> export default { data() { return { avatarUrl: 'your-avatar-url.jpg' // 头像图片地址 }; } }; </script> <style scoped> /* 你可以在这里添加一些样式来美化你的下拉菜单 */ .dropdown-menu { width: 150px; } </style> ``` 在这个示例中，点击头像将会触发下拉菜单，并显示三个选项。你可以根据需要添加更多的 `el-dropdown-item` 来增加更多的菜单选项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值