Vue2实现图片预览功能 -- v-viewer:图片查看器

一. 先看效果图

 

二. 具体步骤

简介:一款基于 viewer.js 封装的Vue版插件,可用于图像查看,以及图片的旋转、缩放等功能预览

官网:v-viewer

文档说明:Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作 - Mirari's Blog

GitHub 下载地址:https://github.com/mirari/v-viewer

1. v-viewer插件安装

npm install v-viewer --save

2. main.js配置:

import Viewer from 'v-viewer'//图片预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({Options: { 'zIndex': 9999,'inline': true, //启用lnline模式'button': true, //显示右上角关闭按钮'navbar': true, //显示缩略图导航'title': true, //显示当前图片的标题'toolbar': true, //显示工具栏'tooltip': true, //显示缩放百分比'movable': true, //显示可移动'zoomable': true, //图片是否可缩放'rotatable': true, //图片是否可旋转'scalable': true, //图片是否可翻转'transition': true, //使用css3过度'fullscreen': true, //播放时是否全屏'keyboard': true, //是否支持键盘'url': 'data-source' //设置大图片的url}
})

 

3. 页面使用 

<viewer><img :src="url" :key="url"/>
</viewer>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/156531.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++学习——“面向对象编程”的涵义

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 类是一个通用的概念&#xff0c;C、Java、C#、PHP 等很多编程语言中都支持类&#xff0c;都可以通过类创建对象。我们可以将类看做是结构体的升级版&#xff0c;C语言的晚辈们看到了C…

LeetCode2562

public static long jointArrayData(int[] nums) {//定义变量存放数据long num 0;//头尾“相加”for (int i 0,j nums.length-1; i < j; i,j--) {if (i!j){//String.valueOf先将Int转String&#xff0c;进行字符串的连接&#xff0c;再用Integer.parseInt方法转回IntStri…

Linux编译FFmpeg

Linux编译FFmpeg 1. 下载FFmpeg源码 FFmpeg源码下载地址&#xff1a;http://ffmpeg.org/download.html 在下面选择版本 2. 解压并创建生成目录 tar xvf ffmpeg-snapshot.tar.bz2 // 解压下载的FFmpeg源码 makedir /root/ffmpeg // 创建生成目录3. 编译FFmpeg 进入FF…

初识Java 13-3 异常

目录 try-with-resources语句 一些细节 新特性&#xff1a;try-with-resources中的实际变量 异常匹配 其他可选方式 检查型异常的一些观点 链式异常的使用 异常的使用指南 小结 本笔记参考自&#xff1a; 《On Java 中文版》 try-with-resources语句 层层叠叠的异常很…

高考600分能上哪些大学 分数线在600以下的大学

大部分学生在高考时最关注一定就是自己的分数最终可以考上哪些大学了&#xff0c;其中600是很多人最关注的一个分数线&#xff0c;那么高于600分的话可以上哪些大学呢&#xff1f;下面就来告诉大家吧。 高考600分能上的大学&#xff1a;湖南大学、西南大学、西安电子科技大学、…

一文理清JVM结构

JVM结构介绍 JVM一共分为三个组成部分: 1 类加载子系统 主要是将class文件加载到内存中的一个系统&#xff0c;其核心组件是类加载器 2 运行时数据区子系统 1 JVM私有部分 1 虚拟机栈 描述的是Java方法执行的内存模型&#xff1a;每个方法在执行的同时都会创建一个栈帧&…

Android绑定式服务

Github:https://github.com/MADMAX110/Odometer 启动式服务对于后台操作很合适&#xff0c;不过需要一个更有交互性的服务。 接下来构建这样一个应用&#xff1a; 1、创建一个绑定式服务的基本版本&#xff0c;名为OdometerService 我们要为它增加一个方法getDistance()&#x…

linux下安装ffmpeg的详细教程、ffmpeg is not installed

1、下载解压 wget http://www.ffmpeg.org/releases/ffmpeg-6.0.tar.gz tar -zxvf ffmpeg-6.0.tar.gz 2、 进入解压后目录,输入如下命令/usr/local/ffmpeg为自己指定的安装目录 cd ffmpeg-6.0 ./configure --prefix/usr/local/ffmpeg make sudo make install 3、配置变量 v…

软件测试工具有什么作用?有哪些好用的测试工具推荐?

软件测试工具是现代软件测试中不可或缺的重要组成部分&#xff0c;指的是一系列在软件开发过程中使用的工具&#xff0c;用于帮助测试人员进行测试活动&#xff0c;提高测试效率&#xff0c;减少测试成本。选择并使用合适的软件测试工具&#xff0c;可提高软件质量和效率。 一…

2023-2024年华为ICT网络赛道模拟题库

2023-2024年网络赛道模拟题库上线啦&#xff0c;全面覆盖网络&#xff0c;安全&#xff0c;vlan考点&#xff0c;都是带有解析 参赛对象及要求&#xff1a; 参赛对象&#xff1a;现有华为ICT学院及未来有意愿成为华为ICT学院的本科及高职院校在校学生。 参赛要求&#xff1a…

解决maven骨架加载慢问题(亲测解决)

1、下载archetype-catalog.xml 网站 &#xff1a; https://repo.maven.apache.org/maven2/ 2、放在这个文件夹下面 3、setting–>build–>Runner : -DarchetypeCataloglocal

stm32 hal库 st7789 1.54寸lcd

文章目录 前言一、软件spi1.cubemx配置2.源码文件 二、硬件spi1.cubemx配置2.源码文件3.小小修改 总结 前言 1.54寸lcd 240*240 一、软件spi 1.cubemx配置 一定要注意把这几个东西上拉。 使用c8 2.源码文件 我使用的是中景园的源码&#xff0c;他本来是是标准库的稍微修改…

rv1126-rknpu-v1.7.3添加opencv库

rv1126所使用的rknn sdk里默认是不带opencv库的&#xff0c;官方所用的例程里也没有使用opencv&#xff0c;但是这样在进行图像处理的时候有点麻烦了&#xff0c;这里有两种办法: 一是先用python将所需要的图片处理好后在转化为bin格式文件&#xff0c;在使用c或c进行读取&…

Jetson Orin NX 开发指南(8): Mavros 的安装与配置

一、前言 由于 Jetson 系列开发板常作为自主无人机的机载电脑&#xff0c;而无人机硬件平台如 PX4 和 ArduPilot 等通过 MAVLink 进行发布无人机状态和位姿等信息&#xff0c;要实现机载电脑与 MAVLink 的通信&#xff0c;必须借助 Mavros 功能包&#xff0c;因此&#xff0c;…

二叉搜索树--查询节点-力扣 700 题

例题细节讲过(二叉搜索树的基础操作-CSDN博客)&#xff0c;下面给出递归实现 public TreeNode searchBST(TreeNode node, int val) {if(node null) {return null;}if(val < node.val) {return searchBST(node.left, val);} else if(node.val < val) {return searchBST(…

新手如何快速上手HTTP爬虫IP?

对于刚接触HTTP爬虫IP的新手来说&#xff0c;可能会感到有些困惑。但是&#xff0c;实际上HTTP爬虫IP并不复杂&#xff0c;只要掌握了基本的操作步骤&#xff0c;就可以轻松使用。本文将为新手们提供一个快速上手HTTP爬虫IP的入门指南&#xff0c;帮助您迅速了解HTTP爬虫IP的基…

Python利用jieba分词提取字符串中的省市区(字符串无规则)

目录 背景库&#xff08;jieba&#xff09;代码拓展结尾 背景 今天的需求就是在一串字符串中提取包含&#xff0c;省、市、区&#xff0c;该字符串不是一个正常的地址;,如下字符串 "安徽省、浙江省、江苏省、上海市,冷运标快首重1kg价格xx元,1.01kg(含)-5kg(不含)续重价…

计算机毕业设计选什么题目好?springboot 航司互售系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

日常学习收获之----react的ref和wrappedComponentRef的区别

react获取子组件的方式&#xff0c;有ref和wrappedComponentRef。那这两者有什么区别呢&#xff1f; 区别在于是否用了高阶组件&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#…

【Mybatis源码】IDEA中Mybatis源码环境搭建

一、Mybatis源码源 在github中找到Mybatis源码地址&#xff1a;https://github.com/mybatis/mybatis-3 找到Mybatis git地址 二、IDEA导入Mybatis源码 点击Clone下载Mybatis源码 三、选择Mybatis分支 选择Mybatis分支&#xff0c;这里我选择的是3.4.x分支