vue 使用 el-image图片无法显示

最新推荐文章于 2024-08-23 17:57:58 发布
最新推荐文章于 2024-08-23 17:57:58 发布
阅读量1.1w 收藏 14
点赞数 9
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43966635/article/details/109171896
版权
在Vue项目中遇到el-image组件显示图片失败的问题，即使图片路径正确。分析原因是webpack未处理相对路径导致无效路径。解决办法是在图片路径前使用require方法，例如：:src="require('./images/top1.jpg')"，此更改可确保图片正常显示。
摘要由CSDN通过智能技术生成

问题：在vue 项目中使用 el-image 后，在图片路径无误的情况下显示图片加载失败
在这里插入图片描述

 <el-carousel trigger="click" :height="carouselHeight">
 	<el-image src
最低0.47元/天 解锁文章
Darren i
关注
专栏目录
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
qq_45706352的博客
03-15 3935
在 element 组件上使用相对路径时 webpack 不会对路径进行处理，导致请求了一个无效的路径。【附】：:src属性后面的字符串会被当做变量解析使用，而src属性后面的只会被当字符串使用。在网页中加载本地图片时，会出现图片加载失败的问题，但使用。（注意给 src 属性加 : ）
vue ＜el-image标签无效果,图片不显示，未发起请求Failed to resolve component: el-
JavaBigData的博客
12-12 1430
【代码】vue ＜el-image标签无效果,图片不显示，未发起请求Failed to resolve component: el-
如何使用 ElImage：Vue 图片上传组件及服务指南
gitblog_01155的博客
08-18 283
如何使用 ElImage：Vue 图片上传组件及服务指南 elimageAn image paste web service. (https://git.io/img)项目地址:https://gitcode.com/gh_mirrors/el/elimage 项目介绍 ElImage 是基于 Vue 3 的组件库，专为设计师和开发者打造，提供了高效的图片处理解决方案。此项目不仅包括前端展示的...
el-image 不显示图片，按钮点击预览
weixin_44254042的博客
06-13 2263
srcList: ['https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'], //预览图片数组。url: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg', //默认图片显示。seePicture(url){//单图片:url为预览图片地址 多图片：url为图片地址数组。// //1如果为单个图片预览。
el-image显示不出来本地图片的问题
weixin_41171651的博客
05-04 1053
使用el-image引入图片，会出现“FAILED” 的情况，把正常img标签中的src="@/assets/logo.png"换成:src="require(‘@/assets/logo.png’)"就可以了。 或者data中的数据为require也可以
el-image本地图片不显示，提示加载失败
我是小鹏呀的博客
05-29 1809
问题描述：el-image使用本地图片不显示，提示加载失败。
vue3 + el-image-viewer 图片组件查看
weixin_38302828的博客
09-27 3544
1.vue2+element -ui中 <el-image-viewer v-if="show" :url-list="url" :on-close="closeViewer" /> 注意是on-close 2.vue3+element-plus中 就是closeurl-list：图片数组 <el-image-viewer v-if="show" :url-list="url" ...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
Vue使用el-upload文件(图片)上传
热门推荐
m0_51431448的博客
06-24 2万+
Vue使用element-ui图片上传
el-image无法显示从本地服务器请求的图片——原因之一及解决办法
Yukinoshita_kino的博客
05-29 8364
最近的项目需求，针对不同的类型显示不同的图片
Element UI 的 el-image本地图片不显示
Aaron Con的博客
09-03 970
el-image遇到的question
element ui中el-image不显示图片
Cooper的博客
04-24 3127
错误方式： <el-image src="src/assets/1.png"></el-image> 正确方式 加入require 注意这时src前要加 ： <el-image :src="require('@/assets/1.png')"></el-image>
解决el-avatar及el-image本地路径的图片不显示问题
最新发布
weixin_50559423的博客
08-23 105
项目中有个上传用户头像的功能，但是不是必填项，不上传的话显示默认头像，默认头像配置在asset目录下面。组件，发现使用本地图片路径无法显示，但是使用原生img标签却能显示。
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
weixin_44326167的博客
08-08 4327
解决element-plus中el-avatar以及el-image组件使用本地路径的图片无法显示的问题
在vite+vue3项目下el-image引用本地图片失败
MM_520131400的博客
05-06 2845
el-image 图片引用失败
Vue中本地图片无法显示
青颜的天空的博客
01-14 2277
最近用Vue开发一个h5页面，网络图片可以正确显示，但是本地图片无法显示 源代码 <img src="../../assets/image/home.png" alt=""/> 找了很多种方法均不行 比如 <img src="~@/static/Trump.jpg" class="image"> 和 src写imgurl用动态获取的方式，src=require（"xxx"） 后来发现直接引入可以 在script中 import homeImg from '../../asset
el-image上使用vue-photo-preview
12-23
el-image组件是Element UI中的一个图片组件，而vue-photo-preview是一个Vue.js的图片预览插件。在el-image上使用vue-photo-preview可以实现点击图片放大预览的功能。具体的实现步骤如下： 1. 首先，安装vue-photo-...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值