在Vue使用图片预览组件viewerjs

最新推荐文章于 2025-07-21 17:55:36 发布

原创最新推荐文章于 2025-07-21 17:55:36 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#viewerjs #Vue #图片预览 #js插件

Js 同时被 2 个专栏收录

4 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

本文介绍如何在Vue项目中安装并使用V-Viewer图片预览组件，包括GitHub地址、安装命令、main.js导入方式及配置默认参数的方法，最后展示了组件的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GitHub地址

安装

cnpm install v-viewer --save

main.js导入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);
Viewer.setDefaults({ "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" });

使用

<viewer>
    <img :src="imgUrl">
</viewer>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大连滚呢王

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-preview,一个vue集成PhotoSwipe图片预览插件(移动端)

zhou_mu_mu_xi的博客

01-02

1170

使用步骤：注意事项：img标签上的class类不能去掉，每个图片数据对象中，必须有 w 和 h 属性安装 npm i vue-preview -S .在main.js文件中导入该组件，并挂载到Vue身上 import VuePreview from ‘vue-preview’; Vue.use(VuePreview); 3.在组件中使用在放缩略图的位置放入模板 <img class=...

在Vue3中展示图片、预览图片，详解，常见场景、常见问题与最佳解决方案

繁若华尘的博客

02-17

2638

通过以上方案，可以覆盖 Vue3 中大部分图片展示与预览场景，建议根据具体需求选择合适方案，注意做好错误边界处理和性能优化

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

移动端Vuejs图片预览插件

08-10

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

vue预览图片 v-viewer

weixin_44955769的博客

08-18

1261

效果 1、安装依赖 npm install v-viewer --save 2、全局引入 import Vue from 'vue'; 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'

基于Viewerjs实现的图片浏览器vue组件

a1308003218的博客

07-04

170

摘要该文章介绍了一个基于Viewerjs实现的Vue图片浏览组件。组件封装了Viewerjs的核心功能，提供图片预览和浏览功能。主要特点包括：使用Viewerjs作为基础库，需先安装依赖通过props接收图片数组支持按索引预览特定图片自动处理图片列表变化时的重新初始化提供组件销毁时的资源清理使用方法简单，只需传入图片URL数组，通过ref调用preview方法即可实现图片浏览功能。适合在需要图片预览功能的Vue项目中使用，效果如示例图片所示。

移动端Vue.js图片预览插件

weixin_34247032的博客

04-14

383

vue-picture-preview 移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title. 安装 NPM npm install --save vue-pictu...

vue中使用viewerjs 实现图片预览

weixin_44441196的博客

04-21

914

1 安装 npm i viewerjs 或者 yarn add viewerjs 2 引入 import Viewer from 'viewerjs' import 'viewerjs/dist/viewer.css' 3使用 <div class="value" id="idNames"> <div class="img-box" v-for="(item, index) in imgList" :key="index"> <img class="

vue+vant使用图片预览功能ImagePreview的问题解决

10-15

在Vue.js框架下，结合Vant UI库进行开发时，我们可能会遇到使用`ImagePreview`组件进行图片预览时遇到的一些问题。`ImagePreview`是Vant提供的一种轻量级的图片预览解决方案，它能够方便地展示一组图片，并且支持...

Vue图片预览插件viewerjs

热门推荐

苍穹尘的博客

07-05

1万+

GitHub地址：https://github.com/fengyuanchen/viewerjs 。 1、安装：npm install v-viewer --save 2、在vue中引用 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' 3、vue注册调用，再调用setDefaults方法自定义配置。 Vue.use...

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

07-24

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

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

m0_67394360的博客

05-15

6062

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

一个移动端专用的Vue2图片预览插件

08-12

An image viewer base on Vue.js for mobile / 一个移动端专用的 Vue2 图片预览插件

vue-photo-preview插件( 照片预览功能 )

lr_24353的博客

10-08

2051

vue中照片预览功能

vue实现移动端图片预览

weixin_49994093的博客

07-08

2564

这里写自定义目录标题vue实现移动端图片预览1.安装插件2.main引入3.使用注意扩展 vue实现移动端图片预览通过使用vue-photo-preview插件，实现移动端图片的预览，全屏等功能。 1.安装插件 npm install vue-photo-preview --save 2.main引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 3.使

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

最新发布

乔的博客

07-21

359

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

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

qq_45569925的博客

04-27

1491

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

gitblog_00683的博客

08-20

736

三种图片预览插件viewer、vue-photo-preview、vue-picture-preview

weixin_54397440的博客

03-01

3288

preview图片预览插件data () {return {imgs: [title: '图片1',},title: '图片2',},

Vue 项目图片预览插件指南

topchenxi987的博客

03-03

1198

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

viewerjs在vue中设置某些图片不可预览

09-30

ViewerJS是一个JavaScript库，用于创建HTML5图片查看器。在Vue.js中使用它来限制特定图片的预览功能，你可以通过组件或者指令来控制这个行为。这里是一种基本的实现步骤： 1. 安装ViewerJS：首先需要在项目中安装，可以使用npm或yarn： ```bash npm install viewerjs --save ``` 2. 在Vue组件中引入并使用 ViewerJS： ```html <template> <div> <img v-if="shouldPreview(file)" :src="file.url" @error="handleImageError"> <button @click="openViewer(file)">预览</button> </div> </template> <script> import Viewer from 'viewerjs'; export default { data() { return { file: null, }; }, methods: { openViewer(file) { if (this.shouldPreview(file)) { const viewer = new Viewer('.viewer', { url: file.url }); } }, shouldPreview(file) { // 这里可以根据file对象的一些属性判断是否允许预览，比如文件类型、大小等 // 比如，只允许预览.jpg和.png： const allowedTypes = ['.jpg', '.png']; return allowedTypes.includes(file.type); }, handleImageError(e) { // 对于不允许预览的错误处理 }, }, }; </script> ``` 在这个例子中，`shouldPreview`方法会检查当前`file`对象的类型，如果不是允许预览的格式，那么就不会初始化`Viewer`实例，图片也不会显示预览界面。