Elementui-Image组件,单个图片点击放大展示

简介: Elementui-Image组件,单个图片点击放大展示
<el-image 
   style="width: 100px; height: 50px"
   :src="scope.row.picUrl"
   :preview-src-list="[scope.row.picUrl]">
</el-image>

主要是preview-src-list方法,直接把url通过[] 包起来即可

相关文章
|
5月前
|
JavaScript
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
30 0
|
5月前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
|
5月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
213 3
|
5月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
637 0
|
11月前
|
JavaScript 前端开发 UED
vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
274 0
|
12月前
|
小程序 UED
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug
371 0
uniapp上传多张图片-带删除按钮查看大图效果demo(整理)
uniapp上传多张图片-带删除按钮查看大图效果demo(整理)
|
JavaScript
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
|
前端开发 容器
使用resize实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样: