element中el-image怎样显示图片

最新推荐文章于 2024-04-02 20:16:54 发布
最新推荐文章于 2024-04-02 20:16:54 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 前端 Element VueJs 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45622628/article/details/119176134
版权
前端 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
Element
14 篇文章 0 订阅
订阅专栏
VueJs
1 篇文章 0 订阅
订阅专栏

代码如下：

<el-image   

        style="width: 100%;"

         :src="require('../../../../assets/images/businessLicense.png')">

</el-image>

区别于普通的<img />标签

<img
        style="width:100%;"
        src="../../../../assets/images/businessLicense.png"
/>

芝麻油yy
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vuecrud钩子_Vue+ElementUI+SpringMVC实现图片上传和回显
weixin_39979245的博客
12-22 359
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求，并且需要在table中显示图片，所以这里我就讲一下结合后端的SpringMVC框架如何实现图片上传并提交到表单中，在table表格中回显照片。本案例对应的开源项目地址请看我的GitHub仓库：写在前面本篇博文主要讲Vue.js+ElementUI如何实现图片上传和提交表单，前端技术会讲...
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端使用el-image显示图片
LKCNFV的博客
10-24 3575
在写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&g
前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）
最新发布
weixin_65793170的博客
04-02 2859
Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。
element 表格显示图片
深圳最菜前端
05-08 3452
先上需求，后台会返回1-9张不等的图片，需要显示在列表页面，一张的时候，就显示大图，超过一张就按照九宫格显示，大概长这样 不多BB，直接上代码 // html <el-table-column prop="commentUrl" label="评论图片" width="195"> <template slot-scope="scope"> <div ...
el-image如何显示本地图片
qq_45030898的博客
02-16 1303
<el-image style="width: calc(100vw - 500px); height: auto" :src="require('@/assets/1-KV.jpg')" fit="fill" ></el-image> 主要看src这里
element el-image放多张图片 显示大图
小猪的博客
11-17 5853
html部分： <el-image v-for="(ele,index) in detailsData.fileIds" :key="index" style="width: 100px; height: 100px" :src="ele.fileDataUrl" :preview-src-list="getPreviewImgList(index)"> </el-image> detailsData.fileIds ：// 后台返回的 u
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-image做水印，给image预览图片添加图标
qq_41973526的博客
11-03 1673
el-image做水印，给image预览图片添加图标
element-plus的el-image 设置圆角图片
ZYXKN的博客
12-17 543
最近在学vue，搭配element-plus创建项目，遇到一个问题就是插入一张图片，明晃晃的矩形感觉不是很好看，我就想怎么设置圆角矩形，百度一下又找不到答案，官方文档好像也没有（可能是我不会看）然后想试着<el-image>外面套层div再设置 border-radius 属性。但是我仔细看了一下<el-image>实现方式外面也是套了一层div的。看来也是对外面的div进行操作的。我就试了一下直接就在<el-image>里面插入样式。
关于element-ui组件库的el-image组件在大图预览时，需要展示图片的同时展示图片名称，点击上一页，下一页时需要动态获取图片的名称，以及在点击不同下标图片时，需要展示当前下标的图片的需求。
翻斗花园初级搬运工
01-05 954
关于element-ui组件库的el-image组件在大图预览时，需要展示图片的同时展示图片名称，点击上一页，下一页时需要动态获取图片的名称，以及在点击不同下标图片时，需要展示当前下标的图片的需求。（以下为个人思路，大佬请略过）首先，当用户点击图片时，有三种情况。分别是当用户点击的为第一张图片时，当用户点击的第X张图片时，当用户点击的是和上一次点击时的图片。最后，预览时点击翻页按钮，需要动态获取图片的名称。其次，要对点击大图预览时，添加照片的名称。
Vue+el-image-viewer显示tiff图片，并能够切换图片中的帧
qq_45742383的博客
10-27 1009
使用vue+el-image-viewer显示tiff图
Vue 使用element-UI 上传图片及图片回显
皮皮的博客
08-24 3839
问题描述： 将后台接口返回的图片，回显到页面 1、html代码 <el-form-item label="房间图片:" prop="images"> <el-upload :action="action" list-type="picture-card" :accept="accept" :auto-upload="true" :limit="imgLimit" :multiple="isMultiple" :file-list="form.images" :
element中el-image显示本地图片
Codernmx
03-02 2603
element中el-image如何显示本地图片 把正常img标签中的src="@/assets/logo.png"换成:src="require(’@/assets/logo.png’)"就可以了。
在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.
（elementui-图片预览）el-dialog+el-image图片显示问题
ss_Tina的博客
10-31 5117
elementui图片预览。点击小图展示大图/点击预览按钮，弹框显示图片，点击图片预览大图。v-viewer预览&el-image预览！el-dialog+el-image图片预览问题修改。页面直接使用el-dialog和组件使用el-dialog。建议使用组件进行引入而不是直接将el-dialog写在页面中，可以修复一些显示性问题。
关于富文本动态文章使用 el-image 图片预览及动态缩放
u014226080的博客
01-29 1736
因为我目前使用的是element plus的组件，所以第一时间想到的就是他自带的el-image组件，不仅提供了图片预览而且还带有图片动态缩放的功能，比一些工具实用些，但可惜，找了半天文档，他似乎没有为动态的使用提供方法，最后想到一个简单且实用的方法。总结：实际上没什么难的地方，网上的那些资料越看越迷糊，真不如自己手动搞搞，实际就是使用到了el-image和el-image-viewer两个组件，一个完成图片的动态缩放，一个为图片增加预览功能，按需使用，如果只需要预览功能，上面的代码就基本没几行了。
element中el-image 点击富文本放大效果
03-31
要实现在点击富文本中的图片时进行放大效果，可以使用以下方法： 1. 在富文本中插入 el-image 组件，设置好图片的路径和大小等属性。 2. 在 el-image 组件上绑定 click 事件，当用户点击图片时触发该事件。 3. 在 click 事件中，使用 Element UI 的 Dialog 组件创建一个弹窗，将 el-image 组件放入其中。 4. 在弹窗中设置 el-image 组件的宽度和高度为 100%，使其铺满整个弹窗。 5. 在弹窗中添加关闭按钮，点击该按钮时关闭弹窗。 以下是示例代码： ```html <template> <div> <div v-html="richText" @click="handleClick"></div> <el-dialog :visible.sync="dialogVisible" width="80%"> <el-image :src="currentImageUrl" style="width: 100%; height: 100%"></el-image> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">关闭</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { richText: '<p>这里是富文本内容<img src="https://example.com/image.jpg"></p>', dialogVisible: false, currentImageUrl: '' } }, methods: { handleClick(event) { const target = event.target if (target.tagName === 'IMG') { this.dialogVisible = true this.currentImageUrl = target.src } } } } </script> ``` 在上面的代码中，我们首先在富文本中插入了一个 el-image 组件，然后在其上绑定了 click 事件。当用户点击图片时，我们将弹出一个 Dialog 组件，其中包含了一个 el-image 组件，并将该图片的路径传递给了 el-image 组件。此外，我们还在 Dialog 组件中添加了一个关闭按钮，点击该按钮时可以关闭弹窗。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝麻油yy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值