vue 图片-点击放大预览-好用的插件-v-viewer

最新推荐文章于 2025-07-31 21:18:10 发布

原创最新推荐文章于 2025-07-31 21:18:10 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #js

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现图片点击放大预览功能，通过引入v-viewer插件，只需将图片链接放入数组即可轻松实现。详细步骤包括安装依赖、在main.js中配置以及在组件中应用。

安装依赖

cnpm install --save-dev v-viewer

main.js 引用

import Viewer from 'v-viewer' 
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    title: false, //显示标题
    navbar: false,
    toolbar: {
      zoomIn: 1,
      zoomOut: 1,
      reset: 1,
      oneToOne: 1,
      rotateRight: 1,
      rotateLeft: 1,
    }
  }
})

页面组件中使用，images必须是一个数组，数组内直接放入图片链接即可

<viewer :images="images">                
	<img :src="getObjectURL(value)" />
</viewer>

参考：https://zhuanlan.zhihu.com/p/55117558

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ccc_cccc_ccc

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用v-viewer实现vue放大预览图片

rxx980608的博客

05-25

835

第一步下载 npm install v-viewer 第二步在main.js引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' 第三步在main.js配置（也可以使用默认的样式）因为我不需要原来那么多的功能，这里直接把toolbar设置成false 这里的title，因为默认一串英文字符，我想显示为图片的名称，在页面的img设置了alt为图片的名称，然后返回 img.alt。可以把img打印出来看看里面有什么。 Vu

【vue】图片点击放大预览 v-viewer

weixin_49133874的博客

07-21

639

有一个需要在列表展示图片且点击放大的功能 1、安装依赖 npm install v-viewer --save 2、全局引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': tr

参与评论您还未登录，请先登录后发表或查看评论

在Vue中使用v-viewer插件实现点击图片预览

qq_45569925的博客

04-27

1514

注册插件，这样组件、指令和api会被一起安装到app全局。版插件，可用于图像查看，以及图片的旋转、缩放等功能预览。v-viewer是一款基于 viewer.js 封装的。指令添加到任意元素即可，该元素下的所有。【指令式调用我觉得非常简便】及必需的css样式，并使用。

移动端Vuejs图片预览插件

08-10

移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.

25-vue-photo-preview的使用及使用过程中的问题解决方案

最新发布

weixin_46675693的博客

07-31

446

正常插件安装之后会有一个types目录，下面有.d.ts的声明文件，但是vue-photo-preview这个包没有，所以提示了这个错误（但是不影响插件的使用）前提条件：在整理预览工具的过程中遇到vue-photo-preview这个插件库，是用于预览图片的，好像没有用过，所以就花了点时间玩了一下。是因为使用了v-if后，图片可能在插件初始化后才渲染到 DOM，所以图片没有和预览进行绑定，可以使用以下方式解决。是 PhotoSwipe 自动为可预览图片生成的唯一标识，用于在预览时定位对应的图片。

Vue 项目图片预览插件指南

topchenxi987的博客

03-03

1419

本文整合了 Vue 项目中常用的图片预览插件，涵盖 Vue 2 和 Vue 3 的解决方案，并提供使用示例和选型建议。

Vue图片预览插件viewerjs

weixin_44590591的博客

11-24

1037

安装 npm install v-viewer 引入插件 //main.js文件 import Vue from "vue"; import Viewer from "v-viewer"; import "viewerjs/dist/viewer.css"; //属性配置 Vue.use(Viewer, { defaultOptions: { 'inline':true,//自动缩放 'button':true, //右上角按钮 "navbar": true, //底部缩略图

vue渲染数据时，v-html中的图片如何点击放大以及 markdowm数据中的图片点击如何放大

時間的博客

08-07

1019

vue渲染数据时，v-html中的图片如何点击放大以及 markdowm数据中的图片点击如何放大

vue 利用插件v-viewer实现图片预览、旋转和缩放

07-03

v-viewer，用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js，亲测有效，可在我主页找怎么使用的文章。

v-viewer:vue的图片查看器组件，支持旋转、缩放、缩放等，基于viewer.js

07-24

vue的图片查看器组件，支持旋转、缩放、缩放等，基于例子缩略图和来源查看器回调过滤图像更改图像中文文档从 0.x 迁移您需要做的唯一更改是手动导入.css文件： import 'viewerjs/dist/viewer.css' 安装...

Vue使用v-viewer实现图片预览和缩放

m0_67394360的博客

05-15

6132

v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等等功能,支持配置化.非常强大,这里记录一下使用过程: 首先v-viewer的中文文档传送门:Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari’s Blog install: npm i v-viewer -S import VueViewer, { directive as viewerDirective } from 'v-viewer'; import 'viewerjs/d

vue点击后html放大,vue实现点击图片放大效果

weixin_32950005的博客

06-27

1163

本文实例为大家分享了vue点击图片放大展示的具体代码，供大家参考，具体内容如下1.建立子组件,来实现图片方法功能: bigimg.vue 　　　　　　 export default {props: ['imgsrc'],//接受图片地址methods: {bigimg() {// 发送事件this.$emit('clickit')}}}/*动画*/.fade-enter-active,.fade...

在vue中嵌入的html代码中的图片使用v-viewer实现旋转、放大等功能

qq_40643116的博客

10-28

1433

本文主要实现在vue代码中，将html代码、js代码以及css代码嵌入div中，并使用html代码与vue的通信，实现双击图片，调用vue里面的方法，实现图片的旋转、放大等功能。

vue3 v-html中使用v-viewer

weixin_53545517的博客

10-11

633

定义获取原始图像URL以供查看的位置。toolbar: true, //指定工具栏及其按钮的可见性和布局。inline: true, //默认值：false。fullscreen: true, //启用以在播放时请求全屏。button: true, //在查看器的右上角显示按钮。scalable: true, //启用以缩放图像。movable: true, //启用以移动图像。zoomable: true, //启用以缩放图像。keyboard: true, //启用键盘支持。

修改viewer.html,v-viewer.html

weixin_28945799的博客

06-03

348

V-Viewer jS[v-cloak] {display: none;} 呵呵1呵呵2呵呵3Vue.use(VueViewer.default)console.log(VueViewer.default)var vueApp = new Vue({el: '#UApp',// router,mounted(){console.log('mounted');},dat...

自定义view--带进度显示的下载按钮

idency的博客

04-25

635

之前看到过一个自定义的下载按钮,在点击后,播放一个小动画,然后按钮就变成一个圆形的progressbar,中间文字显示下载比例,外围轮廓弧度显示下载进度,自己也按照样子写了一个!按钮的效果图: 图:按钮的初始状态图:按钮在下载中另外按钮从初始状态到下载中状态时有一个过渡的动画效果,是用valueAnimator实现的!由于不会传动图,所以就不上图了!实现原理: 1.在ondraw中画出初始状态

【VUE】Vue使用v-viewer挂载到指定节点

踩坑日常和学习笔记

03-02

1658

1.前情提要最近有个项目有个页面的div需要全屏操作，该div下图片又需要能够预览展示（此处使用了v-viewer实现），于是问题来了：当在正常浏览器窗口模式下，v-viewer预览图片时正常全屏显示，而当该div全屏后再点击图片预览发现v-viewer预览图片的全屏被div的全屏覆盖，导致无法正常使用该功能。 2.解决方法根据v-viewer和viewerjs的GitHub文档说明 v-viewer是基于viewerjs实现的而在viewerjs中有个Options里面有个container属性，这

vue2使用v-viewer图片预览：打开页面自动预览，禁止关闭预览，解决在微信浏览器的页面点击事件老是触发预览初始化的问题

乔的博客

07-21

459

本文介绍了如何在Vue项目中集成v-viewer图片预览组件。首先通过npm安装v-viewer和viewerjs依赖，然后在main.js中全局注册并配置可选参数（如层级、工具栏显示等）。代码示例展示了一个移动端图片预览页面，包含导航栏和底部抽屉菜单功能。重点解决了微信浏览器中点击事件触发预览初始化的问题，通过配置backdrop: 'static'禁止点击阴影关闭预览。组件提供了图片切换、获取当前索引等功能，并自定义了移动端样式的预览窗口和底部抽屉。

vue图

随风的博客

05-06

227

v-viewer图片放大预览

01-12

### 如何使用 v-viewer 实现图片放大预览功能 #### 安装依赖库为了能够在 Vue 项目中使用 `v-viewer` 插件，首先需要安装必要的依赖包。可以通过 npm 或 yarn 来完成这一操作。 ```bash npm install viewerjs v-viewer --save ``` 或者 ```bash yarn add viewerjs v-viewer ``` #### 引入并注册插件在项目的入口文件（通常是 main.js），引入 `v-viewer` 并将其作为全局插件注册： ```javascript import Vue from 'vue' import VViewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(VViewer) ``` #### 基本用法示例下面展示了一个简单的例子来说明如何利用 `v-viewer` 组件实现图片的点击放大预览效果[^1]。 ```html <template> <div class="image-preview">  <img :src="smallImageUrl" alt="" @click="showImagePreview"/>  <viewer :images="largeImagesUrls"></viewer> </div> </template> <script> export default { data() { return { smallImageUrl: '/path/to/small/image.jpg', // 小尺寸缩略图路径 largeImagesUrls: [ '/path/to/large/image1.jpg', '/path/to/large/image2.jpg', ... ] } }, methods:{ showImagePreview(){ this.$refs.viewer.show() } } } </script> ``` 在这个例子中，当用户单击小尺寸缩略图时会触发 `showImagePreview()` 方法打开大图预览窗口；而如果是多张图片的情况，则可以直接通过传递给 `<viewer>` 的 `images` 属性指定要加载的大图链接数组[^4]。 #### 自定义配置选项除了默认行为外，还可以自定义一些参数来自定义查看器的行为，比如是否允许下载、分享等功能以及调整界面样式等。这些都可以通过修改初始化时传入的对象来进行设置[^3]。例如: ```javascript // 在main.js 中添加如下代码片段 Vue.use(VViewer, { options: { "inline": true, "button": false, "navbar": false, "title": false, "toolbar": { zoomIn: 0, // 放大按钮 zoomOut: 0, // 缩小按钮 oneToOne: 0, // 还原实际大小按钮 reset: 0, // 重置按钮 (包括还原旋转角度和水平垂直翻转状态) prev: 0, // 上一张按钮 play: 0, // 播放幻灯片按钮 next: 0, // 下一张按钮 rotateLeft: 0, // 向左旋转90度按钮 rotateRight: 0,// 向右旋转90度按钮 flipHorizontal:// 水平镜像反转按钮 0, flipVertical: // 垂直镜像反转按钮 0 }, "tooltip": false, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true } }) ``` 以上就是有关于 `v-viewer` 插件的基础介绍及其基本应用方式[^2]。