使用指南: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. SonarQube与Eclipse配合

    Sonar安装 下载Sonar 点击下面网址下载Sonar: http://dist.sonar.codehaus.org/sonar-3.5.1.zip ,下载后解压 解压后安装 解压后你将要看到如 ...

  2. Spring boot 注册Filter , Listener, Servlet

    1: ServletRegistrationBean   Servlet @Bean public ServletRegistrationBean myServlet(){ ServletRegist ...

  3. 伪AJAX

    <h3>3,伪ajax</h3> <h6>学习iframe(嵌套别人家网站的)</h6> <div> <input id=" ...

  4. android 环境变量

    1.新建一个环境变量和系统变量名称为ANDROID_HOME,变量值为当前安装SDK的目录 2.把%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools添 ...

  5. DotNet菜鸟入门之无限极分类(一)设计篇

    写这个教程的原因,是因为,无限极分类,在许多项目中,都用得到.而对于新手来说,不是很好理解,同时,操作上也有一些误区或者不当之处.所以我就斗胆,抛砖引玉一下,已一个常见的后台左侧频道树为例子,讲解一下 ...

  6. css3 制作一个遮罩

    思路:1.显示两块图片,2.图片区域(初始隐藏),3.鼠标移入,遮罩显示,此时遮住图片,4.鼠标移出,遮罩恢复初始状态 用到两个css3 属性:transtion ,transform 用法: 1. ...

  7. 微信、陌陌等著名IM软件设计架构详解(转)

    对微信.陌陌等进行了分析,发出来分享一下(时间有些久了) 电量:对于移动设备最大的瓶颈就是电量了.因为用户不可能随时携带电源,充电宝.所以必须考虑到电量问题.那就要检查我们工程是不是有后台运行,心跳包 ...

  8. The Google File System——论文详解(转)

    “Google文件存储系统(GFS)是构建在廉价服务器之上的大型分布式系统.它将服务器故障视为正常现象,通过软件方式自动容错,在保证系统可用性和可靠性同时,大大降低系统成本. GFS是Google整个 ...

  9. Java 配置环境变量教程

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  10. 关于新版OPENWRT拔PPTP的619错或PPTPD无法连接问题笔记

    旧版的openwrt要安装kmod-ipt-nethelper这个包 对于新版,如3.18或4.xx内核的ROM,要安装kmod-nf-nathelper-extra这个包