使用指南:https://www.npmjs.com/package/vue-directive-image-previewer

简单使用:

1.安装vue-directive-image-previewer

命令行

npm install vue-directive-image-previewer -D

2.main.js中引入

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

3.组件中引用

<template>
<div>
<img v-image-preview src="picture-url"/>
</div>
</template>

效果

转载自:https://blog.csdn.net/y895315416/article/details/82963396

vue 点击图片显示大图的更多相关文章

  1. JQuery - 点击图片显示大图

    效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  2. 一天JavaScript示例-点击图片显示大图片添加鼠标

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 点击图片查看大图(纯js)

    $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...

  4. [原创]WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  5. JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

    一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...

  6. WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  7. ionic中点击图片看大图的实现

    在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击 ...

  8. (1)vue点击图片预览(可旋转、翻转、缩放、上下切换、键盘操作)

    今天做项目的时候,遇到了新需求,需要把点击图片放大的功能.学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewer ...

  9. jQuery插件——imgbox(点击图片查看大图)

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

随机推荐

  1. LeetCode 题解 56. Merge Intervals

    题目大意:给出一组区间,合并他们. 首先是排序,首先看start,start小的在前面.start相同的话,end小的在前面. 排序以后,要合并了. 我自己的笨方法,说实在的问题真的很多.提交了好几次 ...

  2. C#利用CDO.Message发送邮件

    如何引用CDO.Message? cod.message的引用位置: C:\Windows\System32\cdosys.dll CDO.Message objMail = new CDO.Mess ...

  3. setitimer函数

    和alarm函数类似,都用于定时操作: 函数原型:int setitimer(int which, const struct itimerval *new_value, struct itimerva ...

  4. UGUI的text赋值问题-速度

    仅是简单的给一个ugui.text组件不断的赋值字符串,就会带来很高的CPU消耗,约0.5MS左右. 这个过程主要是消耗在字体的MESH顶点重建. 在游戏中变化的字体一般不多,聊天面板虽然变化,刷新率 ...

  5. HTML实现页面自动跳转的五种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

  6. python玩丢手绢问题,出局的顺序

    # 丢手绢问题# 游戏规则: 有N个小朋友玩丢手绢游戏,做成一圈,从第一个小朋友开始数数,从一开始数,数到指定数字的小朋友要出列,然后下一个小朋友继续从1开始数,依次类推,算出最后一个留下来的小朋友是 ...

  7. C++中文件读写的操作

    在C++中读读写文件一般指的就是磁盘中的文本文件和二进制文件: 文本文件:以字符序列组成的文件 二进制文件:由二进制组成的文件 读写文件采用ofstream和ifstream文件流,两者可用头文件&l ...

  8. IPv4和IPv6的差异;如何实现IPv4和IPv6双协议栈的通信

    1 IPv4和IPv6的差异 1.1 地址空间   IPv6 与 IPv4 比较最显著的一个改动就是使用 128 比特上的地址来代替了 32 比特长的 IPv4 地址. IPv6 中取消了广播地址, ...

  9. 通过给事件处理程序传递this参数,获取事件源对象的引用。单机提交按钮时在信息框中显示用户输入的字符。

    <script> function mymethod(str) { alert("您输入的是:"+str); } </script><form act ...

  10. JAVAWEB 一一 框架整合(SSH,Spring+Struts2+Hibernate IOC/DI AOP声明式事务处理 定时任务)

    package org.springframework.orm.hibernate3; import java.io.Serializable; import java.util.List; impo ...