Package detail

vue-previewable-image

yisibell2592.4.2

A previewable image Vue component based on viewerjs.

aidol, aidol-image, viewer, vue, vue-image, el-image, component, viewerjs, image, preview, previewable, image-viewer

readme

vue-previewable-image

A previewable image Vue component based on viewerjs.

:warning: TIPS: Current vue-previewable-image needs Vue verison to 3.2.0+. For vue2, please use 1.x.

See example here.
Release Notes.

Features

:heavy_check_mark: Support preview image via viewerjs.
:heavy_check_mark: Support image lazy load.
:heavy_check_mark: Support using image viewer as a component via ImageViewer.

Package

Version	Support Vue version	Docs
`^1.7.0+`	`^2.7.14`	See v1
`^2.1.2+`	`^3.2.0` and above	See v2

Installation

# pnpm
$ pnpm add vue-previewable-image

# yarn
$ yarn add vue-previewable-image

# npm
$ npm i vue-previewable-image

Usage

Do not forgot to import the style vue-previewable-image/dist/style.css

<template>
  <main>
    <PreviewableImage
      v-model:current-preview-index="currentIndex"
      :src="src"
      :preview-src-list="srcList"
      :viewer-title="viewerTitle"
      width="100px"
      @switch="handleSwitch"
    />
  </main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PreviewableImage } from 'vue-previewable-image'
import type { CustomViewerTitle, ViewerSwitchEvent } from 'vue-previewable-image'

const src =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

const srcList = [
  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
]

const viewerTitle: CustomViewerTitle = (img, { index, total }) => {
  console.log('img:', img)
  return `${img.alt} (${index + 1}/${total})`
}

const handleSwitch: ViewerSwitchEvent = (index, viewer) => {
  console.log('on switch:', index, viewer)
}

const currentIndex = ref(0)
</script>

You also can use viewerjs from this package, This is equal to import Viewer from 'viewerjs'.

import { Viewer } from 'vue-previewable-image'

Or, you can using image viewer as a component, See ImageViewer.

Using via Vue plugin

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import PreviewableImage from 'vue-previewable-image'
import type { PreviewableImageOptions } from 'vue-previewable-image'

const app = createApp(App)

app.use(PreviewableImage, {
  // set global component name
  componentName: 'PreviewableImage',

  // set Viewer default options
  defaultViewerOptions: {
    // ...
  }

} as PreviewableImageOptions).mount('#app')

Attributes

Prop name	Description	Type	Available value	Default value
`width`	The img container `width`	`string`	-	`undefined`
`height`	The img container `height`	`string`	-	`undefined`
`src`	The `src` of img	`string`	-	`undefined`
`alt`	The `alt` of img	`string`	-	`undefined`
`referrerPolicy`	The `referrerPolicy` of img	`string`	-	`undefined`
`lazy`	Whether to enable image lazy load	`boolean`	-	`true`
`zIndex`	Define the CSS `z-index` value of the viewer in modal mode	`number` or `string`	-	`2015`
`fit`	The `object-fit` of img	`string`	`fill / contain / cover / none / scale-down`	`fill`
`previewSrcList`	Define your previewable image list	`string[]` or `{ src: string; alt: string}[]`	-	`[]`
`currentPreviewIndex`	Current preview image shown index, support `v-model`	`number`	-	`0`
`viewerOptions`	Define viewerjs Options	-	-	`{}`
`viewerTitle`	Define viewer title. First argument is `HTMLImageElement` which is generated by `previewSrcList`, second argument is a object `{ index: number; total: number }` which record current viewer index and previewable image count	`Function`	-	`undefined`

Events

Event name	Description	Callback arguments
`switch`	Emit when preview image switch.	`(index: number, viewer: Viewer) => void`
`load`	Emit when image load success.	`(e: Event) => void`
`error`	Emit when image load error.	`(e: Event) => void`