解决el-avatar及el-image本地路径的图片不显示问题

于 2024-08-23 17:57:58 发布
阅读量63 收藏
点赞数
分类专栏： 日积月累 文章标签： vue.js 前端 javascript
原文链接：https://blog.csdn.net/weixin_44326167/article/details/126222660
版权

        项目中有个上传用户头像的功能，但是不是必填项，不上传的话显示默认头像，默认头像配置在asset目录下面。界面是使用了el-avatar组件，发现使用本地图片路径无法显示，但是使用原生img标签却能显示。

 如何解决？

使用引入的方法

 

 el-image这个组件也是一样的操作，有用的话点个赞啦！

随笔写
关注
专栏目录
026：vue中el-progress逆向倒计时方式显示_el-progress逆时针(1)
2401_84411072的博客
04-27 970
在vue项目开发中，涉及到流量的使用情况，采用el-progress进度条来显示目前流量的状态。由于流量是越来越少，所以要采用逆向的方式来显示出来。el-progress示例中都是正向的方式，我们这里是做了一小部分修改，达到了想要的效果，如图。在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。
el-upload的使用
Lemontree_fu的博客
09-18 1148
当我们在用element这个框架时，如果有需要用到图片或者头像时，这个时候就可以用el-upload了。 但是这也会分情况，比如你页面上的图片是你上传到服务器上，还是后台让你给他一种64位流的形式。 第一种情况，由你上传到服务器上 这种情况就比较简单了，你就可以给action这个参数设置就行，代码如下 <el-upload class="avatar-uploader" actio...
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
weixin_44326167的博客
08-08 4312
解决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的值。”
elementUI 使用el-image图片组件的问题
最新发布
weixin_39725702的博客
06-21 232
elementUI组件，使用el-image有时候加载不出图片，显示了默认图
el-image本地图片不显示，提示加载失败
我是小鹏呀的博客
05-29 1669
问题描述：el-image使用本地图片不显示，提示加载失败。
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
Alan_Walker688的博客
07-08 9838
当使用 el-image 在网页中加载本地图片时，会出现图片加载失败的问题，但使用 img 可以正常显示。
Element UI 的 el-image本地图片不显示
Aaron Con的博客
09-03 966
el-image遇到的question
el-image中图片本地引入
PinelliaLogic的博客
06-11 659
element ui中el-image、el-avatar本地静态引入加载失败问题解决
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
el -avatar
08-18
总结起来，解决el-avatar组件无法显示本地图片路径的问题的方法包括确保图片路径正确、将图片转换为DataURL格式以及将图片上传到服务器并使用服务器返回的路径。根据具体情况选择适合的方法即可。<span class="em">1...
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
11-19
对于自定义图片上传，Vue-quill-editor默认使用Base64编码存储图片，但这种方法可能会导致内容过长，不利于服务器存储。因此，我们需要改用将图片上传到服务器并返回URL的方式。这里利用了Element-UI的`el-upload`...
el-image如何显示本地图片
qq_45030898的博客
02-16 1376
<el-image style="width: calc(100vw - 500px); height: auto" :src="require('@/assets/1-KV.jpg')" fit="fill" ></el-image> 主要看src这里
el-image加载本地图片
简单点的博客
12-21 1455
el-image加载本地图片
el-image无法显示从本地服务器请求的图片——原因之一及解决办法
Yukinoshita_kino的博客
05-29 8300
最近的项目需求，针对不同的类型显示不同的图片
vue打包后el-image图片不出来
墨迹斑斑的老墙
12-17 1703
图片路径问题
在element中el-image如何显示本地图片
热门推荐
甜心的专栏
07-22 1万+
使用el-image引入图片，会出现“FAILED” 的情况，把正常img标签中的src="@/assets/logo.png"换成:src="require('@/assets/logo.png')"就可以了。 <div> <h3>img引入本地图片</h3> <img src="@/assets/images/demo.jpeg" width="200"> </div> <div> <h.
el-image加载本地图片并实现放大预览功能
HPlove__77的博客
01-29 2147
第一种方式是通过相对路径获取图片，使用src和preview-src-list属性绑定本地图片地址需要使用require函数，且preview-src-list属性的值为数组形式。el-image官方组件实现放大预览功能的源码为下图，使用的网上的图片地址。:preview-src-list属性中的图片为放大的图片地址。第二种方式是通过绝对路径获取图片，同样的src和preview-src-list属性绑定图片绝对地址的值。
el-table-column 中的 el-image 无法正常显示图片
Alan_Walker688的博客
02-26 3555
解决 el-table-column 中的 el-image 无法正常显示图片的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值