使用指南: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. gridEh的bug

    grideh的bug,delphi和c++builder都存在. RAD自带的原始grid控件是好的. procedure TForm12.DBGridEh2ColExit(Sender: TObje ...

  2. 固定顶部指定div不滑动

    .fixed_div { position:fixed; z-index:100; top: 45px; width:100%; height:45px; } 指定div设置属性position:fi ...

  3. ORM对单表的增删改查

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

  4. C++ 连接Oracle

    下面是一个ADO方式连接Oracle的小程序部分代码...... 首先是Oracle的配置.在Oracle的安装路径下找到:Oracle\network\ADMIN\tnsnames.ora文件.配置 ...

  5. ORA-00600: internal error code, arguments: [4193]问题解决

    操作环境 SuSE+Oracle11gR2 问题现象 单板宕机自动重启后,ORACLE运行不正常,主要表现如下: 1.执行shutdown immedate停止数据库时,提示ORA-00600: in ...

  6. [ 测试思维 ] 启发式测试策略模型(HTSM)

    什么是HTSM 启发式测试策略模型(Heuristic Test Strategy Model,简称HTSM)是测试专家James Bach提出的一组帮助测试设计的指南(Guide line).HTS ...

  7. openwrt用WEB刷固件型号不对问题强行处理

    参照这里:https://blog.csdn.net/caoshunxin01/article/details/79355602 原机是一块mt7620A的通板,之前刷了一个叫WE826型号的固件,发 ...

  8. 16进制转ascii,转字符串

    /** * 16进制转化为字母 * @param hex 要转化的16进制数,用逗号隔开 * 如:53,68,61,64,6f,77 * @return */ public static String ...

  9. Delphi实现图像文本旋转特效完整代码

    Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...

  10. C#中让WebBrowser运行Javascript脚本

    C#中可以让Webbrowser运行Javascript脚本来实现各种自动化操作,比如点击网页上的按钮,输入用户名密码等等.代码也很简单: >>>>>>>&g ...