前端使用el-image显示图片

最新推荐文章于 2024-08-18 10:34:04 发布
最新推荐文章于 2024-08-18 10:34:04 发布
阅读量3.6k 收藏 7
点赞数 2
文章标签： 1024程序员节 vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LKCNFV/article/details/109256084
版权
在Vue项目中，作者遇到了图片导入失败的问题，尝试了import和相对路径等方法未果。最终通过在`<el-image>`组件中使用`require('@/assets/image/temperature.jpg')`成功加载了图片，实现了图片显示。此方法适用于处理Vue项目中静态资源的引入。
摘要由CSDN通过智能技术生成

在写Vue时，我把需要的图片放在了Vue项目根目录下的src/assets/image文件夹下
在这里插入图片描述
当中图片的导入使用了很多方法，import，或者是使用相对路径都未能成功，使用以下方法成功加载图片。

   <el-image
   style="width: 50px; height: 50px"
   :src="require('@/assets/image/temperature.jpg')"
   fit="fill"
   class="tempimg"></el-image>
LKCNFV
关注
Element-ul的 el-image-viewer组件实现点击【查看图片】能预览大图功能
吴小花的博客
09-14 6036
element-ul有大图预览功能，链接如下 Element - The world's most popular Vue UI framework 但我们不想展示图片，想实现的是“查看图片”能预览大图（多张也可以预览）的功能。 如下图所示： 该如何实现呢？ 1.导入组件 // 导入组件 import ElImageViewer from "element-ui/packages/image/src/image-viewer"; 2.注册组件 components:...
el-image加载本地图片
weixin_35751412的博客
12-29 3817
可以使用以下方法来加载本地图片到 el-image 中: 使用 require 函数: <template> <el-image:src="require('@/assets/your-image.png')"></el-image> </template> 使用 require 函数并传入图片的相对路径: <template&g...
element-Plus表格组件中使用el-image图片预览功能的踩坑
BewHYzzz的博客
09-22 2716
解决方案：在el-image中加入属性 preview-teleported="“true”"，即可正常预览。在表格内点击图标，进入大图预览模式。
如何使用 ElImage：Vue 图片上传组件及服务指南
最新发布
gitblog_01155的博客
08-18 264
如何使用 ElImage：Vue 图片上传组件及服务指南 elimageAn image paste web service. (https://git.io/img)项目地址:https://gitcode.com/gh_mirrors/el/elimage 项目介绍 ElImage 是基于 Vue 3 的组件库，专为设计师和开发者打造，提供了高效的图片处理解决方案。此项目不仅包括前端展示的...
element中el-image怎样显示图片
mingY的博客
07-28 1206
代码如下： <el-image style="width:100%;" :src="require('../../../../assets/images/businessLicense.png')"> </el-image> 区别于普通的<img />标签 <img style="width:100%;" src="../../../../assets/images/busin...
el-image 加载网络图片不显示的解决办法
cm159177的博客
05-13 4925
当使用el-image 加载网络图片（做公众号的时候），当图片数量超过5张时，总是至少有一张不显示。不知道为什么。代码如下： <el-image v-if="leftImage !== undefined" lazy :src='leftImage' :preview-src-list="[leftImage]" class="leftImage"> </el-image> 如果有谁知道，请...
el-image加载本地图片并实现放大预览功能
HPlove__77的博客
01-29 2152
第一种方式是通过相对路径获取图片，使用src和preview-src-list属性绑定本地图片地址需要使用require函数，且preview-src-list属性的值为数组形式。el-image官方组件实现放大预览功能的源码为下图，使用的网上的图片地址。:preview-src-list属性中的图片为放大的图片地址。第二种方式是通过绝对路径获取图片，同样的src和preview-src-list属性绑定图片绝对地址的值。
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
el-image图片放大后的关闭事件
nick_zhang的博客
02-19 1557
我们知道el-image的放大是由单独的el-image-viewer组件构成，那么这个组件的方法怎么在el-image中的调用呢，看到源码中有个关闭时的回调函数closeViewer，里面是通过showViewer来控制图片放大的显示与隐藏，那么我们只需要监听子组件的showViewer来做对应的事情即可。那么就换种思路，既然最后是点击那么就监听dom的点击事件吧，只要是关闭按钮以及蒙层都做对应的事情即可。但事与愿违，此种监听子组件的方法存在问题，所以先放弃。
render 里 el-image图片预览 preview-src-list
qq_42404842的博客
01-12 577
【代码】render 里 el-image图片预览 preview-src-list。
vue中el-image下载本地图片
qaqbanixan的博客
04-23 786
【代码】vue中el-image下载本地图片。
el-image里面调用assets静态图片资源
zhangyr的博客
02-22 973
注：require在vue3+vite中不支持。2.import引入，具体写法有两种。1. 使用require引入。
el-image如何显示本地图片
qq_45030898的博客
02-16 1377
<el-image style="width: calc(100vw - 500px); height: auto" :src="require('@/assets/1-KV.jpg')" fit="fill" ></el-image> 主要看src这里
img el-image访问图片列表，图片403问题解决
weixin_51747462的博客
08-01 845
img el-image图片403问题解决
el-image无法显示从本地服务器请求的图片——原因之一及解决办法
Yukinoshita_kino的博客
05-29 8314
最近的项目需求，针对不同的类型显示不同的图片
vue 使用 el-image图片无法显示
热门推荐
weixin_43966635的博客
10-19 1万+
问题：在vue 项目中使用 el-image 后，在图片路径无误的情况下显示图片加载失败 <el-carousel trigger="click" :height="carouselHeight"> <el-image src="images/top1.jpg" fit="fill" style="height:100%;width:100%"></el-image> </el-carousel> 原因分析： 通过图片的请求可知，在elemen
element中el-image显示本地图片
Codernmx
03-02 2659
element中el-image如何显示本地图片 把正常img标签中的src="@/assets/logo.png"换成:src="require(’@/assets/logo.png’)"就可以了。
ElementUI 中 ElImageViewer 组件的使用与属性说明
贝贝的博客
12-03 2561
ElementUI 中 ElImageViewer 组件的使用与属性说明 ElImageViewer是Image组件的内置组件，主要实现图片的预览功能，对于这个组件官方文档没有过多介绍，但有些需求可以单独使用 使用方法 <!-- 这里用 v-if 和 v-show 的区别是 v-if 每次都会重置默认第一张预览图，由 initialIndex 属性指定，而 v-show 会缓存上次切换的那张图 --> <el-image-viewer v-if="showViewer" :in
el-image图片回显跨域
06-07
el-image 组件默认情况下是支持跨域图片的，但是需要后端服务在响应请求时设置 Access-Control-Allow-Origin 头部，允许前端跨域访问。 如果后端服务已经设置了正确的响应头，但 el-image 组件仍然无法正常显示图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值