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

``bash

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

`vue




`

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

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

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

Using via Vue plugin

`ts
// 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 |

Slots

| Name | Description |
| :----: | :----: |
| placeholder | Define the placeholder content to display when image is not loaded |
| error` | Define the content to display when image load error |