使用指南: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. idea 自动导入包和自动将没用的包去除

    加快开发效率,除去没用的包,洁癖者必用!      这样设置,就可以自动导入包以及除去没有用到的包

  2. SQL Server--存在则更新问题

    在博客园看到一篇讨论特别多的文章“探讨SQL Server并发处理存在就更新七种解决方案”,这种业务需求很常见:如果记录存在就更新,不存在就插入. 最常见的做法: BEGIN TRANSACTION ...

  3. C# CefSharp 可监听请求等

    原地址:https://blog.csdn.net/jinxiu0406/article/details/80365140 bug1:在抓取js文件的时候,有时候数据未获取全,文本被截断了.在IRes ...

  4. python列表中,多次追加元素

    在列表中追加元素,可以使用append(),列表相加也可以用extend()函数,多次追加元素可以用“+”实现 l=[1,2,3,4,5] x=6 y=7 z=8 l=l+[x]+[y]+[z] pr ...

  5. Ubuntu中清理Network下Connect to Server的入口

    转自:http://blog.csdn.net/maxilbert/article/details/51126467 connect to server入口列表文件以xml格式存放在 ~/.confi ...

  6. js高级-闭包

    function foo(x){ var tmp = 3; return function(y){ //把一个函数作为返回值,定义时候的作用域 console.log(x+y+(++tmp)) //+ ...

  7. frambuffer 相关函数理解

    1. framebuffer_alloc()功能是向内核申请一段大小为sizeof(struct fb_info) + sizeprivate的空间,其中sizeprivate的大小代表设备的私有数据 ...

  8. biopython

    转载Part 2  Biopython的重头戏-生物学中序列的处理 Biopyhton的Seq和Python中标准字符串有两大重要的不同之处:首先,他们的处理方法不同.Seq适用于很多不同字符串的用的 ...

  9. shell脚本-删除当天日期前3个月的数据表

    #!/bin/bash #author:skycheng #get current date string datestr=`date +'%Y-%m-%d'` start_time=`date +' ...

  10. Shader基础(渲染管线)

    Shader原理部分 渲染绘图管线流程:     1.顶点处理(坐标系的转换) 一个模型有自身的方向(前方,上方,右方等)和中心点,既本地坐标系: 将这个模型放到场景当中,通过场景中的世界坐标原点和世 ...