element-ui 头像上传组件 上传成功未显示图片

最新推荐文章于 2023-12-01 19:41:51 发布
最新推荐文章于 2023-12-01 19:41:51 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： vue element-ui 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tcmmx1993/article/details/108214917
版权

通常在实际使用动态显示时，会直接使用传入对象变量的属性

新增操作时变量为空，没有这个属性导致上传成功却无法显示图片

但是修改存在的记录就可以正常显示

解决方法：

传入使用前声明属性赋值为空字符串

tcmmx1993
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue element ui upload上传成功没有回显
weixin_42066070的博客
06-15 2713
使用element ui 封装的组件，父组件调用子组件的时候，图片数据有更新，但是视图上没有显示出来图片1.封装的子组件，每次数据更新的时候直接强刷2.查看图片的时候也直接强刷3.关键代码 4.不想啰嗦，直接上父组件的代码4.1标签引入子组件 4.2注册子组件 4.3调用子组件的强刷 5.子组件的代码...
element upload上传图标隐藏和修改回显图片
s212571231的博客
10-08 1946
element upload上传图标隐藏和修改回显图片。
elementui头像不显示问题
clf20731的博客
11-11 1934
vue代码 <div class="demo-fit"> <el-avatar shape="square" :size="100" fit="fill" :src="url"></el-avatar> </div> js代码 <script> export default { data() { return { url: './default_avatar.jpeg', }; } }
遇到的Vue elementUI图像上传不显示的问题
lgs7907
07-26 5009
编者：李国帅 qq：9611153 微信lgs9611153 时间：2021-7-26 问题描述: 在使用Vue elementUI图像上传组件el-upload的时候，发现如果ruleForm没有原始数据，上传图片后，图片无法显示。 于是经过仔细的分析比较，发现只要把<el-form-item的绑定属性和<el-upload内部<img的属性设置为不同变量，上传完成后设置img的src即可。 解决方案: <el-dialog ti...
ElementUi:图像上传成功后刷新图片不显示
W_change_red的博客
02-08 569
ElementUi:图像上传成功后刷新图片不显示
使用＜el-upload＞组件时上传图片成功后不回显如何解决(紧急避坑)
m0_68509013的博客
09-18 3807
2.但是这样使用的话会出现一个问题,el-image组件的src属性是动态绑定的，而item.src的值更新后并没有立即反映到el-image组件上。item.src" size="mini" type="primary">点击上传图片使用el-upload>组件时图片无法回显, 只能展示一个是否完成的图标, 这个对用户体验不是很友好, 无法直观的看到自己上传的图片.// 将返回值绑定到item.src变量 原代码是: item.src=response.link。
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
基于element-ui 使用 upload 预览图片 （含删除功能）
08-23
基于element-ui 使用 upload 预览图片 （含删除功能）参考链接：https://blog.csdn.net/qq_36437172/article/details/100034867
vue+element实现图片上传及裁剪功能
10-15
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现图片上传和裁剪功能。Vue.js是一个流行的轻量级前端JavaScript框架，而Element UI则是一个基于Vue.js的UI组件库，提供了丰富的界面元素，如表单、...
el-avatar 头像切换不显示
01-19
Element UI+Vue踩坑实录：组件下头像切换不显示 使用做头像的时候后，发现切换后原有的头像都不显示了。头像不更新…数据更新之后，图片并没有更新，而且报了404的错，数据里有头像还好，一旦有一条数据头像为空...
Elementplus遇到的问题
最新发布
qq_36022463的博客
12-01 192
【代码】Elementplus遇到的问题。
解决element-ui和 vant两个组件库上传组件，上传图片后无法显示图片的问题
haogemr的博客
07-12 2056
组件库上传图片显示问题
vue+element-plus上传图片功能以及回显问题还有数量限制
精通前端技术，了解后端接口
04-13 2091
vue+element-plus上传图片功能以及回显问题还有数量限制
Upload 上传 以及图片不显示问题 element-ui
热门推荐
jiangjiang_ing的博客
01-07 1万+
&lt;el-button v-if="sys_push_type_add" class="filter-item" size="small" @click="handleCreate" type="primary" icon="edit"&amp
element-ui图片上传之后，对上传按钮的隐藏
weixin_53981442的博客
10-18 929
element-ui图片上传之后，对上传按钮的隐藏
vue element 单张图片上传，不展示图片
凡尘
06-16 876
vue element 图片上传
【开发实践】用Element实现图片的上传和回显vue
高远的博客
07-10 1050
图片显示 在首页list列表展示效果 <el-table-column label="封面图片" align="center" width="150" prop="imageAddress"> <template slot-scope="scope"> <el-image v-if="scope.row.imageAddress && scope.row.imageAddress!=='[]'" class="item_im
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
Alan_Walker688的博客
07-08 9546
当使用 el-image 在网页中加载本地图片时，会出现图片加载失败的问题，但使用 img 可以正常显示。
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 方法用于限制上传图片的类型和大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值