Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Overview

v-viewer

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

npm version language

npm version language

npm download license

v-viewer for vue3

Live demo

Examples

中文文档

Migration from 0.x

  • The only change you have to make is to manually import the .css file:
import 'viewerjs/dist/viewer.css'

Installation

Install from NPM

npm install v-viewer

Usage

To use v-viewer, simply import it and the css file, and call Vue.use() to install.

">
<template>
  <div>
    
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    div>
    
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src">
    viewer>
    
    <button type="button" @click="show">Click to showbutton>
  div>
template>
<script>
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(VueViewer)
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      show() {
        this.$viewerApi({
          images: this.images,
        })
      },
    },
  }
script>

Support UMD

Browser

">
<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/vue/dist/vue.js">script>
<script src="//unpkg.com/viewerjs/dist/viewer.js">script>
<script src="//unpkg.com/v-viewer/dist/v-viewer.js">script>
<script>
  Vue.use(VueViewer.default)
script>

CommonJS

var VueViewer = require('VueViewer')

AMD

require(['VueViewer'], function (VueViewer) {});

Usage of directive

Just add the directive v-viewer to any element, then all img elements in it will be handled by viewer.

You can set the options like this: v-viewer="{inline: true}"

Get the element by selector and then use el.$viewer to get the viewer instance if you need.

">
<template>
  <div>
    <div class="images" v-viewer="{movable: false}">
      <img v-for="src in images" :src="src" :key="src">
    div>
    <button type="button" @click="show">Showbutton>
  div>
template>
<script>
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(VueViewer)
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      show () {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      }
    }
  }
script>

Directive modifiers

static

The viewer instance will be created only once after the directive binded.

If you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.

">
<div class="images" v-viewer.static="{inline: true}">
  <img v-for="src in images" :src="src" :key="src">
div>
rebuild

The viewer instance will be updated by update method when the source images changed (added, removed or sorted) by default.

If you encounter any display problems, try rebuilding instead of updating.

">
<div class="images" v-viewer.rebuild="{inline: true}">
  <img v-for="src in images" :src="src" :key="src">
div>

Usage of component

You can simply import the component and register it locally too.

Use scoped slot to customize the presentation of your images.

">
<template>
  <div>
    <viewer :options="options" :images="images"
            @inited="inited"
            class="viewer" ref="viewer"
    >
      <template #default="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
        {{scope.options}}
      template>
    viewer>
    <button type="button" @click="show">Showbutton>
  div>
template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from "v-viewer/src/component.vue"
  export default {
    components: {
      Viewer
    },
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      show () {
        this.$viewer.show()
      }
    }
  }
script>

Component props

images
trigger

You can replace images with trigger, to accept any type of prop. when the trigger changes, the component will re-render the viewer.

">
<viewer :trigger="externallyGeneratedHtmlWithImages">
  <div v-html="externallyGeneratedHtmlWithImages"/>
viewer>
rebuild

The viewer instance will be updated by update method when the source images changed (added, removed or sorted) by default.

If you encounter any display problems, try rebuilding instead of updating.

">
<viewer
  ref="viewer"
  :options="options"
  :images="images"
  rebuild
  class="viewer"
  @inited="inited"
>
  <template #default="scope">
    <img v-for="src in scope.images" :src="src" :key="src">
    {{scope.options}}
  template>
viewer>

Component events

inited

Listen for the inited event to get the viewer instance, or use this.refs.xxx.$viewer.

Usage of api

Only available in modal mode.

You can call the function: this.$viewerApi({options: {}, images: []}) to show gallery without rendering the img elements yourself.

The function returns the current viewer instance.

URL Array
">
<template>
  <div>
    <button type="button" class="button" @click="previewURL">URL Arraybutton>
    <button type="button" class="button" @click="previewImgObject">Img-Object Arraybutton>
  div>
template>
<script>
  import 'viewerjs/dist/viewer.css'
  import { api as viewerApi } from "v-viewer"
  export default {
    data() {
      sourceImageURLs: [
        'https://picsum.photos/200/200?random=1',
        'https://picsum.photos/200/200?random=2',
      ],
      sourceImageObjects: [
        {
          'src':'https://picsum.photos/200/200?random=3',
          'data-source':'https://picsum.photos/800/800?random=3'
        },
        {
          'src':'https://picsum.photos/200/200?random=4',
          'data-source':'https://picsum.photos/800/800?random=4'
        }
      ]
    },
    methods: {
      previewURL () {
        // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
        const $viewer = this.$viewerApi({
          images: this.sourceImageURLs
        })
      },
      previewImgObject () {
        // Or you can just import the api method and call it.
        const $viewer = viewerApi({
          options: {
            toolbar: true,
            url: 'data-source',
            initialViewIndex: 1
          },
          images: this.sourceImageObjects
        })
      }
    }
  }
script>

Options & Methods of Viewer

Refer to viewer.js.

Plugin options

name

If you need to avoid name conflict, you can import it like this:

">
<template>
  <div>
    
    <div class="images" v-vuer="{movable: false}">
      <img v-for="src in images" :src="src" :key="src">
    div>
    <button type="button" @click="show">Showbutton>
    
    <vuer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    vuer>
  div>
template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Vuer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Vuer, {name: 'vuer'})
  export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {
      show () {
        // viewerjs instance name
        const vuer = this.$el.querySelector('.images').$vuer
        vuer.show()
        // api name
        this.$vuerApi({
          images: this.images
        })
      }
    }
  }
script>

defaultOptions

If you need to set the viewer default options, you can import it like this:

import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

And you can reset the default options at any other time:

import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
Viewer.setDefaults({
  zIndexInline: 2017
})
Issues
  • Uncaught TypeError: Cannot read property 'length' of undefined

    Uncaught TypeError: Cannot read property 'length' of undefined

    这个length的错误是从哪里来的 一直没有找到

    opened by leefreeF 20
  • 重新下了包之后发现图片无法打开

    重新下了包之后发现图片无法打开

    image image 以前一直是正常使用的,这两天重新下了一遍包就失效,经排查是这个月viewerjs更新的版本导致的问题,用1.3.4的viewerjs版本就能正常打开 请问能解决一下问题或者在package.json里固定一下viewerjs的版本号吗

    opened by 747497456 18
  • 修改watch images 方法,调用viewer的update方法

    修改watch images 方法,调用viewer的update方法

    修改watch images 方法,调用viewerjs的update方法 viewerjs提供了该方法用来更新图片,调用该方法更为合适 事实上,原来的方式会有点bug,仅仅改变images,无需重新实例化

    opened by winter-ice 12
  • 请教监听上下一张按钮的功能

    请教监听上下一张按钮的功能

    诚恳请教:想解决.pdf格式结尾的显示, 如果不能显示。还请教 如何在自己的vue页面 监听next按钮的方法,(我来自己判断剔除pdf文件)

    opened by smileoneCXY 11
  • 是否可以没点击之前只显示加载一张缩略图,点击打开相册。

    是否可以没点击之前只显示加载一张缩略图,点击打开相册。

    是否可以没点击之前只显示加载一张缩略图,点击打开相册。

    opened by mocker12345 10
  • 页面中会出现两个viewer-container

    页面中会出现两个viewer-container

    vue.js、viewer.js等是直接引入的,但是会出现并列两个viewer-container

    opened by Lee66 9
  • Component method not working!

    Component method not working!

    <viewer :images="this.awardData.files">
              <img v-for="src in this.awardData.files" :src="'src'" :key="src">
            </viewer>
    

    Hey, above is my code. I tried using component method. But nothing is shown in the browser.

    Is that I should use directive method also or any of the methods(component, directives) is fine?

    opened by harishankards 9
  • How to handle when an image is unavailable?

    How to handle when an image is unavailable?

    I am finding then if my gallery a single image that is unavailable (due to 403 or 404 error when the browser attempts to load it), the entire viewer will not function.

    Is this intentional? Is there a way to handle these errors gracefully so the viewer will still work for the other images?

    I am using viewer with the inline option and it simply never appears if there is an error loading one out of 200 images.

    opened by flyingL123 8
  • Remove unused 'images' attribute

    Remove unused 'images' attribute

    Currently, <viewer> component takes the non-optional images attribute but then does nothing good with it (in particular, it does not render images from it). This is not only useless but deceitful.

    For example:

      <viewer :images="images">
        <!-- images is ignored! -->
        <img src="https://picsum.photos/200/200">
        <img src="https://picsum.photos/300/200">
        <img src="https://picsum.photos/250/200">
      </viewer>
    

    Whatever is passed to images is not used, although it is required to pass an Array value there.

    images will be passed as a slot scope argument however this serves no purpose either, because the slot code has direct access to containing component data, for example:

    <template>
      <viewer>
        <slot>
          <!-- no need to pull images from slot scope, it is already available: -->
          <img v-for="image in images" :src="image">
        </slot>
      </viewer>
    </template>
    
    <script>
    export default {
      data () {
        return {
          images: [ ... ]
        }
      }
    }
    </script>
    

    Codepen demonstrating both problems: https://codepen.io/ilya-semenov/pen/KRKXLv

    This PR removes image attribute. It also replaces scope with slot-scope in the example, as the former is deprecated in Vue 2.5.

    opened by IlyaSemenov 8
  • 组件形式使用,突然发生的问题

    组件形式使用,突然发生的问题

    之前是^1.2.1版本,昨天项目上线打包的时候出现了, * v-viewer/src/component.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/viewer/index.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/flow/flowPicture.vue?vue&type=script&lang=js& 意思是就是找不到,v-viewer/src/component.vue ,这个依赖,很奇怪。 一个问题是,目前发现 1.5.0 版本是没有问题的,解决方案暂时是,直接锁住1.5.0版本

    opened by ofgood 3
  • 提个需求,能否让下面的button操作栏(放大,缩小等等)支持slot方式传入

    提个需求,能否让下面的button操作栏(放大,缩小等等)支持slot方式传入

    提个需求,能否让下面的button操作栏(放大,缩小等等)支持slot方式传入,因为想新增按钮或者更改按钮图表

    opened by bingyuea 2
  • 指令形式设置options内的toolbar按钮

    指令形式设置options内的toolbar按钮

    作者你好,我想隐藏toolbar中部分按钮(prev, play, next),对options内的toolbar进行设置时,会导致所有按钮均不见了 例子用的是 https://codepen.io/mirari/pen/PePrVq 仅仅修改了传给它的options

    初学者想请教如何设置
    opened by xdmatirx 2
  • 您好,有个非常重要的问题需要咨询您

    您好,有个非常重要的问题需要咨询您

    您好,我现在手机上需要使用您的这个组件,但是在pc游览器上测试时,他是没有问题的,但是我在手机上时,就会变得非常卡,

    需求是这样的,我有一个网页,有个图片上传,上传成功后有一个回显,这个图片回显列表使用了这个组件,

    出现问题是 ,会特别的卡顿,当在 钉钉内置游浏览器里时,都直接卡退了

    难道是因为我的图片列表的动态改变的,导致的原因吗

    opened by houkongquan12138 1
  • 使用v-viewer后,input无法获取焦点,无法正常输入

    使用v-viewer后,input无法获取焦点,无法正常输入

    如题,去除v-viewer后,input恢复正常。这是不是哪里的事件导致的?求教下!!

    opened by jilieryuyi 1
  • PDF

    PDF

    hello, i am trying to open images (.jpg, jpeg, etc, etc) but i am unable to open pdf, it opens the viewer but image(pdf) is loading. is there a problem on my end?

    opened by 00michal 1
  • 关于图片地址错误,设置错误时的默认图片

    关于图片地址错误,设置错误时的默认图片

    大佬,请问一下这种应该怎么处理

    opened by Sunny-kai 2
  • Drawing on top of the images

    Drawing on top of the images

    Hello, I'm using your viewer for a project. I need to be able to draw boxes on top of the images, I was trying to embed an html5 canvas on top of the image but that didn't work properly. Can you help me on how to draw on top of images ?

    opened by askari12 3
Releases(v1.5.1)
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

XiongAmao 141 Jun 16, 2021
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한국어 Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 52 Jun 8, 2021
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件

img-vuer An Mobile-First image viewer for Vue2 中文 README ??‍♀️ Easy to use ?? Swipe gesture ?? Zoom gesture V0.11.0 Now you can use thumbnail~ V0.13.0

DJJo 245 Jun 7, 2021
Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

Willy Hong 268 Jan 24, 2021
Vue progressive image loader plugin like Medium

vue-image-loader Vue progressive image loading plugin Article here : https://www.kevindesousa.me/vue-image-loader/ Installation $ npm install @kevinde

Kevin De Sousa 53 Mar 6, 2021
A lightbox inspired Vue.js component.

A second version of the lightweight lightbox inspired component for Vue.js with local video support and more features coming. If you're interested, see demo.

Martin Rocek 223 Jun 6, 2021
🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

vue-image-painter English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

Komo 19 May 30, 2021
Vue image placeholder directive for broken images.

Vue Image Fallback v-img-fallback Vue image placeholder directive for broken images. If you like this project, please give it a star, and consider fol

Joff Tiquez 43 Mar 29, 2020
Optimized Images for Nuxt

Optimized Images for Nuxt

Nuxt 403 Jun 16, 2021
Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported

Vue-cool-lightbox is a pretty Vue.js lightbox component, inspired by fancybox with zoom, swipe, captions and videos supported.

Lucas Pulliese 221 Jun 13, 2021
A Wrapper of Panolens for building VR applications with Vue based on threejs

A framework for building VR applications with Vue

Mudin Ibrahim 364 Jun 2, 2021
A Vue.js (https://github.com/vuejs/vue) plugin that offers a reusable directive to get image from Cloudinary (https://cloudinary.com)

vue-cloudinary A Vue.js plugin that offers a reusable directive to get image from cloudinary Overview This is a port of the angular-cloudinary library

Diego Pamio 25 Dec 5, 2020
Image slideshow program

slideshow 가족앨범 사진들을 디스플레잉을 어떻게 할 수 있을까 고민하다가 슬라이드쇼 프로젝트를 시작하게 되었습니다. 예전에 만든 슬라이드쇼를 제대로 만들어본 경험으로 더 좋은 모습으로 만들고 했습니다. 슬라이드쇼의 목적은 브라우저 전체화면으로 사진을 한장씩 넘겨

redgoose 5 Jun 1, 2021
A native Vue.js lightbox component

vlightbox Simple native Vue.js lightbox

Oliver Taylor 34 May 20, 2020