Vue实现图片大图预览，v-viewer组件的使用方法演示

叁歲伎倆 2024-03-30 17:09 13阅读 0赞

**先看下效果图：**  
点击图片就会进入预览，还包括图片名和原图大小、工具栏等。  
![在这里插入图片描述][aedea29db7634dccbf687217c3199ec0.png]  
首先需要安装 **v-viewer**  
`npm install v-viewer`  
![在这里插入图片描述][d83620250f4346f892bcb62ec3923d91.png]  
然后在 **main.js** 中进行导入。

import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    Vue.use(Viewer)

实例使用中，只需要用 **viewer** 包住图片即可。

<viewer>
      <img alt="a duck" src="../assets/duck.jpg">
    </viewer>

如果想隐藏工具栏或图片名称等。  
直接在引用时设置下默认配置。  
下面 **4** 个配置分别是标题、工具栏、导航栏、关闭按钮，可以选择性隐藏。

import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    Vue.use(Viewer)
    Viewer.setDefaults({
        
      title: false,
      toolbar: false,
      navbar: false,
      button: false
    })

都关闭后的效果图：  
![在这里插入图片描述][989b808a5ce74e94ba35ba5723930d9f.png]  
喜欢的点个赞❤吧!

[aedea29db7634dccbf687217c3199ec0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0074da1ebd0643fa9369c51cf1b9b2fd.png
[d83620250f4346f892bcb62ec3923d91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7c1f88161f8546c6b902b4da9c521f69.png
[989b808a5ce74e94ba35ba5723930d9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a1197d04164a48f2bdef1b050695f4e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用v-viewer，实现图片预览

1.安装依赖 npm install v-viewer --save 2.在main.js中引入 import Viewer from 'v-vi

谁借莪１个温暖的怀抱￠/ 2024年04月08日 11:12/ 0 赞/ 131 阅读

相关 Vue实现图片大图预览，v-viewer组件的使用方法演示

先看下效果图：点击图片就会进入预览，还包括图片名和原图大小、工具栏等。 ![在这里插入图片描述][aedea29db7634dccbf687217c3199ec0.p

叁歲伎倆/ 2024年03月30日 17:09/ 0 赞/ 14 阅读

相关 React使用antd的图片预览组件，点击哪个图片就预览哪个的设置

使用了官方推荐的相册模式的预览，但是点击预览之后，每次都是从图片列表的第一张开始预览，而不是点击哪张就从哪张开始预览：![ed52ba95881f43eba282e090516

绝地灬酷狼/ 2023年10月14日 17:21/ 0 赞/ 107 阅读

相关 vue图片预览

vue结合vant实现图片视频预览 1. 给图片或视频添加点击事件 <div class="comment_image_box_list" v-for="(im

蔚落/ 2023年07月18日 02:48/ 0 赞/ 51 阅读

相关用vue实现点击图片预览浏览器满屏大图

前提 -------------------- 安装插件 npm install vue-directive-image-previewer -D

谁借莪１个温暖的怀抱￠/ 2023年03月04日 15:28/ 0 赞/ 59 阅读

相关点击按钮预览图片，可以预览多组图片（vue+element）

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！ > 1、点击按钮预览图片； > 2、可以预览多个

た入场券/ 2022年08月30日 15:59/ 0 赞/ 1143 阅读

相关 Vue图片预览插件viewerjs

GitHub地址：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewer

灰太狼/ 2021年12月16日 08:13/ 0 赞/ 1268 阅读

相关看我如何使用Vue实现图片的上传以及大图预览功能

文章目录前言功能实现前言最近使用Vue作图片的上传，以及图片的列表展示功能，并且可以对图片进行放大预览处理，这里做一下记录总结，方便以后使用。

Dear 丶/ 2021年09月25日 11:32/ 0 赞/ 609 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2481 阅读

相关 Vue使用v-viewer 插件实现图片预览

vue图片点击放大预览v-viewer 1、安装依赖 npm install v-viewer --save 2.在main.js中引入 import V

比眉伴天荒/ 2021年07月24日 19:56/ 0 赞/ 903 阅读