vue图片缩略图及图片预览功能

前言

上次有个需求,是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的, 几句代码可以搞定,也不需要什么额外的插件。

效果如下:

  • vue显示图片缩略图
  • vue显示图片预览功能
    在这里插入图片描述

核心代码

两个el-image ,一个作为reference ,最后包括在一个el-popover即可。

<el-popover
        placement="right"
        title=""
        trigger="hover">
    <el-image src="${request.contextPath}/static/images/class1.png"></el-image>
    <el-image slot="reference" src="${request.contextPath}/static/images/class1.png" alt="${request.contextPath}/static/images/class1.png" style="max-height: 150px;max-width: 200px">
</el-popover>
已标记关键词 清除标记
相关推荐
bkViewer中文版是一款非常方便数码照片的浏览和集中处理工具,并且它还可以批量预览图片缩略图,如果您打算截图多个图片预览效果,选它就对了。 软件说明 bkViewer不会在磁盘中增加任何冗余信息,直接利用现存文件夹方式对图片进行预览和浏览; bkViewer通过外挂程序对图片进行处理,同时也具有图片缩放、翻转、剪切、亮度锐度饱和度调整等最常用的基本编辑功能; bkViewer可以直接显示EXIF/IPTC/XMP/ICC数码照片拍摄参数信息和直方图,可详细查看镜头型号、防抖、快门次数等厂商标记; bkViewer支持解析的厂商标记包括Canon、Casio、Epson、FujiFilm、Kodak、KonicaMinolta、Leica、Nikon、Olympus、Panasonic、Pentax、Ricoh、Sanyo、Sigma、Sony等多家厂商; bkViewer支持通过IE、Firefox、Opera、Chrome右键菜单或扩展在线查看网页图片的拍摄信息; bkViewer支持实时像素拾色,方便的播放幻灯片或发送电子邮件,或将图片拖放到QQ窗口传递; bkViewer对后期处理的图片自动建立PS目录进行备份。当然,您也可以直接编辑而不备份,决定权在您; bkViewer支持图片预读以提升浏览速度,批量缩放等功能支持多核系统并行处理。它只有一个数百K的可执行文件,可以方便的拷贝运行; 除jpg、bmp、dib、rle、tif、png、gif、wmf等通用图片格式外,bkViewer还支持ttf、ttc字体预览,以及Canon(CR2/CRW), Nikon(NEF/NRW), Fuji(RAF), Leica(RAW/DNG), Kodak(DCR/KDC), Olympus(ORF), Pentax(DNG/PEF/RAW), Sony(ARW/SR2), Minolta(MRW), Panasonic(RAW/RW2), Richo(DNG), Samsung(SRW/DNG), Leaf(MOS), Hasselblad(3FR), Mamiya(MEF), Epson(ERF)等原始格式图片浏览及标记解析。 从bkViewer 3.0版本开始使用Windows GDI 图像处理引擎,未安装GDI 的系统需要下载GdiPlus.dll并放入bkViewer所在目录或系统目录。
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页