使用指南: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. day02-数据库操作

    一.数据库操作 1.1.创建数据库(增) CREATE DATABASE 也可以使用小写,(注意不要漏掉分号 ;) mysql> create database test; 或 mysql> ...

  2. iOS响应链原理

    ios找到被点击的view的过程是从根view开始递归地调用hitTest方法,直到有一个子view的hitTest方法返回自身:如果所有一级子view的hitTest方法都返回nil,那么根view ...

  3. ORACLE常用操作命令

    1.ORACLE实例启动.停止 SQL>startup;  #启动ORACLE实例 SQL>shutdown immediate; #关闭ORACLE实例,常用.阻止新用户连接且阻止已连接 ...

  4. MySQL字符集介绍及配置

    目录 1.MySQL编码集 2.修改字符集 3.MySQL数据库中字符集转换流程 4.修改现有字符集 1.MySQL编码集 查看MySQL支持的字符集 mysql> show character ...

  5. serclet监听器

    1:监听servlet上下文 2:监听会话 3:监听请求 使用,必须是实现对应的接口,然后在web.xml中配置自己写的监听器的实现类 过滤器之后,servlet之前(有待深入研究) 下一集预告:过滤 ...

  6. hdu3189-Just Do It-(埃氏筛+唯一分解定理)

    Just Do It Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  7. SPSS-聚类分析

    聚类分析(层次聚类分析(Q型聚类和R型聚类).快速聚类分析) 聚类分析的实质:是建立一种分类方法,它能够将一批样本数据按照他们在性质上的亲密程度在没有先验知识的情况下自动进行分类.这里所说的类就是一个 ...

  8. Centos 7升级内核

    检查当前 CentOS 系统内核版本 uname -sr 在 CentOS 7 上启用 ELRepo 仓库 rpm --import https://www.elrepo.org/RPM-GPG-KE ...

  9. css-background-image 背景图片太大或太小

    .zoomImage {                background-image:url(images/yuantiao.jpg);                background-rep ...

  10. app.route()

    [app.route()] 可使用 app.route() 创建路由路径的链式路由句柄.由于路径在一个地方指定,这样做有助于创建模块化的路由,而且减少了代码冗余和拼写错误.请参考 Router() 文 ...