使用指南: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. VSFTP 服务器配置

    解决root用户无法登陆ftp传输文件的问题 配置vsftpd用户,启用root用户.  #cd /etc/vsftpd #vi ftpusers  注释掉root  修改user_list文件  # ...

  2. compute by 的使用

    GROUP BY子句有个缺点,就是返回的结果集中只有合计数据,而没有原始的详细记录.如果想在SQL SERVER中完成这项工作,可以使用COMPUTE BY子句.COMPTE生成合计作为附加的汇总列出 ...

  3. 机器学习入门-文本数据-构造词频词袋模型 1.re.sub(进行字符串的替换) 2.nltk.corpus.stopwords.words(获得停用词表) 3.nltk.WordPunctTokenizer(对字符串进行分词操作) 4.np.vectorize(对函数进行向量化) 5. CountVectorizer(构建词频的词袋模型)

    函数说明: 1. re.sub(r'[^a-zA-Z0-9\s]', repl='', sting=string)  用于进行字符串的替换,这里我们用来去除标点符号 参数说明:r'[^a-zA-Z0- ...

  4. day01-MySQL介绍

    一.MySQL的介绍 1.1.MySQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 W ...

  5. Leetcode 题解 reverse List II

    这个题确实太容易错了. 我已经做了2遍了,之前都是套用reverse List 1中的函数. 现在尝试用新方法,在一个函数里完成,结果又错了. 事实证明,永远不要想当然!!!白板编程真的是要求,你对每 ...

  6. es6 初级之箭头函数

    1.先看一个例子: <script> function show() { console.log('aluoha'); } show(); </script> 2. 改写成简单 ...

  7. 经典论文翻译导读之《Google File System》(转)

    [译者预读] GFS这三个字母无需过多修饰,<Google File System>的论文也早有译版.但是这不妨碍我们加点批注.重温经典,并结合上篇Haystack的文章,将GFS.TFS ...

  8. Eclipse优化常用方法

    Eclipse优化常用方法如下: 1.减少不必要的验证 将Manual保持不动,build里面只留下classpath dependency Validator,其他的全部去掉.如果以后需要对文件进行 ...

  9. Eclipse实用操作

    1.缩进:Tab 2.退格:Shift+Tab 3.包结构展开方式:Package Presentation 4.快速定位文件:按ctrl键不放,鼠标移至链接处 5.为属性快速生成相应的get和set ...

  10. React/anu实现弹出层2

    这次是使用了一个比较罕见的APIReactDOM.unstable_renderSubtreeIntoContainer,ReactDOM.unstable_renderSubtreeIntoCont ...