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

前言

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

效果如下：

vue显示图片缩略图
vue显示图片预览功能

核心代码

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

<el-popoverplacement="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>

vue图片缩略图及图片预览功能相关推荐

alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
Windows 7 Home Basic 的任务栏缩略图预览和Alt+Tab缩略图平铺预览功能已足够了
网上看到许多Win7HB强开Aero特效的文章,故本人仔细看了一下Windows 7 Home Basic 中的相关功能. 也许老旧机器的确需要几个xp即可运行的类似Aero功能的VisualTool ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
word转图片 java_Java 利用LibreOffice将Office文档转换成 PDF，进而转图片，实现在线预览功能...
项目中需要将 Office 文档上传并实现在线预览,用到了 LibreOffice 将 Office 文档转换为 PDF 文档,然后再用 pdfbox 将 PDF 转为图片. 本文介绍借助 Libre ...
js html怎么加入图片,js实现图片上传并预览功能
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个标签,在图片上传之后,用新图片的src替换原来标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对 ...
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
文章目录 @[TOC](文章目录) 方法一. Luckysheet 预览方法二. Office Web 查看器(微软的开发接口) 方法三. XDOC文档预览云服务(预览pdf.word.xls.pp ...
Vue中实现pdf文件预览功能
写在前面: 实现的功能就是点击预览按钮,弹出对话框在线预览pdf文件实现此功能的前提是需要在Vue项目中安装组件vue-pdf, 在终端命令行输入运行如下语句: npm install --save ...
Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）
** 问题还原: ** 在做项目时,用户需要上传Excel模板,里面有对应的各种数据.我们拿到这个Excel后,定时的根据其中的数据去查对应的实时数据并进行计算,然后将实时数据和计算后的数据保存到Ex ...

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

前言

核心代码

vue图片缩略图及图片预览功能相关推荐

最新文章

热门文章