使用指南: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. sql server 语法 MSDN

    https://docs.microsoft.com/en-us/sql/t-sql/statements/create-view-transact-sql

  2. 机器学习-文本数据-文本的相关性矩阵 1.cosing_similarity(用于计算两两特征之间的相关性)

    函数说明: 1. cosing_similarity(array)   输入的样本为array格式,为经过词袋模型编码以后的向量化特征,用于计算两两样本之间的相关性 当我们使用词频或者TFidf构造出 ...

  3. ORM对单表的增删改查

    表记录的增加: 1)b = Book(name='python', price=99) b.save() 2)Book.objects.create(name='python', price=99) ...

  4. TWebBrowser禁止弹出Alert对话框

    以前介绍过通过编写Webbrowser1的OnDocumentComplete事件响应代码可以拦截网页弹出的Alert等对话框,代码如下: procedure TForm1.WebBrowser1Do ...

  5. Java读写avro例子

    一.avro是一个数据序列化框架,可以高效得进行序列化和反序列化,支持C, C++, C#, Java, PHP, Python, 和Ruby语言.现在使用Java来读写. 二.环境搭建 1.下载av ...

  6. T-SQL行合并成列与列拆分成行

    本文出处:http://www.cnblogs.com/wy123/p/6910468.html 感觉最近sql也没少写,突然有一点生疏了,对于用的不是太频繁的一些操作,时间一久就容易生. 多行的某一 ...

  7. ROS:ROS操作类MK.cs

    class MK { Stream connection; TcpClient con; public MK(string ip,int port) { con = new TcpClient(); ...

  8. Unity3d资源管理分析

    原创链接:http://blog.csdn.net/ox_thedarkness/article/details/9197453 分离资源管理 参考 1.Unity3D占用内存太大的解决方法 - 星尘 ...

  9. 四,ViewSets和Routers

    概述 在DRF中,允许在一个类中组合一组相关视图的逻辑,称为ViewSets.比如通过通用视图,可以定义列表视图.详情视图等等,但每个视图位于不同的类中,而通过ViewSets则可以将多个视图放在同一 ...

  10. ASP.NET 三级联动

    三级联动就是用三个下拉列表框DropDownList,每个里面添加相应的东西,在第一个列表框中选择一个值,第二三个列表框都会根据第一个选择进行相应的变化,在第二个列表框中选择一个值,第三个列表框也会根 ...