Vue-image-previewer NPM

vue-previewer

👀 A vue component for previewing images

Live Demo

Features

no other dependencies
support zoom-in, zoom-out, rotate, fullscreen operations
support image events such as select, close
support customer options
support key operation
support footer slot

Install

// with yarn
yarn add vue-image-previewer
// with npm
npm install vue-image-previewer

Usage

import VuePreviewer from 'vue-image-previewer'

// defalut install
Vue.use(VuePreviewer);

// install with global options
Vue.use(VuePreviewer, {
  defaultWidth: '100px',
  defaultHeight: '75px',
  thumbnailStyle: {
    backgroundSize: 'cover'
  },
  keyMap: {
    zoomin: '+',
    zoomout: '-',
    rotate: 'r',
    prev: 'ArrowLeft',
    next: 'ArrowRight'
  }
})

Example

new Vue({
  el: '#app',
  components: { VuePreviewer },
  data() {
    return {
      imgs: [
        'http://pic.lvmama.com/uploads/pc/place2/2016-09-14/9aab9bb7-2593-4ca6-8c5a-31355443aebc.jpg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJQQM7xWSl3uRGecETNjaLl8_2wmAvlGpwyzX_Xs3RyZoTsM_j',
        "http://crawl.nosdn.127.net/d426f0175b974f7cce092a8f16d0ee09.jpg",
        "http://seopic.699pic.com/photo/50093/5337.jpg_wh1200.jpg"
      ]
    }
  },
  template: '<vue-previewer :images="imgs" :options="{}"/>'
})

Props

Property	Type	Description	Default
images	ArrayString/ImageOptions	Images for previewing	required
options	PreviewerOptions	Extra options for configing component	{}
mode	"image", "link"	show image as link or image	"image"
showFooter	Boolean	Footer slot	true

ImageOptions

{
	src: 'xxx.jpg', // origin image source
  thumbnailSrc: 'xxxThumbnail.jpg', // thumbnail source
	width: '100px', // thumbnail width
	height: '75px', // thumbnail height
	name: 'Image Test' // Image name which shows in footer
}

PreviewerOptions

// default options
{
	defaultWidth: '100px', // thumbnail width, '100px' or '20%'
	defaultHeight: '75px', // thumbnailStyle height, '100px' or '20%'
	thumbnailStyle: { backgroundSize: 'cover' },
  keyMap: {
    zoomin: '+',
    zoomout: '-',
    rotate: 'r',
    prev: 'ArrowLeft',
    next: 'ArrowRight'
  }
}