\r\n\r\n# vue-previewable-image\r\n\r\nA **previewable** image Vue component based on viewerjs.\r\n\r\n> :warning: TIPS: Current `vue-previewable-image` needs **Vue** verison to `3.2.0+`. For **vue2**, please use [1.x](https://github.com/yisibell/vue-previewable-image/tree/1.x).\r\n\r\n- See [example](https://hongwenqing.com/vue-previewable-image/) here.\r\n- [Release Notes](./CHANGELOG.md).\r\n\r\n# Features\r\n\r\n- :heavy_check_mark: Support preview image via `viewerjs`.\r\n- :heavy_check_mark: Support image lazy load.\r\n- :heavy_check_mark: Support using image viewer as a component via [ImageViewer](./docs/image-viewer-component.md).\r\n\r\n# Package\r\n\r\n| Version | Support Vue version | Docs |\r\n| :---: | :---: | :---: |\r\n| `^1.7.0+` | `^2.7.14` | See [v1](https://github.com/yisibell/vue-previewable-image/tree/1.x) |\r\n| `^2.1.2+` | `^3.2.0` and above | See [v2](https://github.com/yisibell/vue-previewable-image) |\r\n\r\n# Installation\r\n\r\n```bash\r\n# pnpm\r\n$ pnpm add vue-previewable-image\r\n\r\n# yarn\r\n$ yarn add vue-previewable-image\r\n\r\n# npm\r\n$ npm i vue-previewable-image\r\n```\r\n\r\n# Usage\r\n\r\n> Do not forgot to import the style `vue-previewable-image/dist/style.css`\r\n\r\n```vue\r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n```\r\n\r\nYou also can use `viewerjs` from this package, This is equal to `import Viewer from 'viewerjs'`.\r\n\r\n```ts\r\nimport { Viewer } from 'vue-previewable-image'\r\n```\r\n\r\nOr, you can using image viewer as a component, See [ImageViewer](./docs/image-viewer-component.md).\r\n\r\n\r\n## Using via Vue plugin\r\n\r\n```ts\r\n// main.ts\r\n\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport PreviewableImage from 'vue-previewable-image'\r\nimport type { PreviewableImageOptions } from 'vue-previewable-image'\r\n\r\nconst app = createApp(App)\r\n\r\napp.use(PreviewableImage, {\r\n // set global component name\r\n componentName: 'PreviewableImage',\r\n\r\n // set Viewer default options\r\n defaultViewerOptions: {\r\n // ...\r\n }\r\n\r\n} as PreviewableImageOptions).mount('#app')\r\n\r\n```\r\n\r\n# Attributes\r\n\r\n| Prop name | Description | Type | Available value | Default value |\r\n| :----: | :----: | :----: | :----: | :----: |\r\n| `width` | The **img** container `width` | `string` | - | `undefined` |\r\n| `height` | The **img** container `height` | `string` | - | `undefined` |\r\n| `src` | The `src` of **img** | `string` | - | `undefined` |\r\n| `alt` | The `alt` of **img** | `string` | - | `undefined` |\r\n| `referrerPolicy` | The `referrerPolicy` of **img** | `string` | - | `undefined` |\r\n| `lazy` | Whether to enable image lazy load | `boolean` | - | `true` |\r\n| `zIndex` | Define the CSS `z-index` value of the viewer in modal mode | `number` or `string` | - | `2015` |\r\n| `fit` | The `object-fit` of **img** | `string` | `fill / contain / cover / none / scale-down` | `fill` |\r\n| `previewSrcList` | Define your previewable image list | `string[]` or `{ src: string; alt: string}[]` | - | `[]` |\r\n| `currentPreviewIndex` | Current preview image shown index, support `v-model` | `number` | - | `0` |\r\n| `viewerOptions` | Define [viewerjs Options](https://github.com/fengyuanchen/viewerjs) | - | - | `{}` |\r\n| `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` |\r\n\r\n\r\n# Events\r\n\r\n| Event name | Description | Callback arguments |\r\n| :---: | :---: | :---: |\r\n| `switch` | Emit when preview image switch. | `(index: number, viewer: Viewer) => void` |\r\n| `load` | Emit when image load success. | `(e: Event) => void` |\r\n| `error` | Emit when image load error. | `(e: Event) => void` |\r\n\r\n\r\n# Slots\r\n\r\n| Name | Description |\r\n| :----: | :----: |\r\n| `placeholder` | Define the placeholder content to display when image is not loaded |\r\n| `error` | Define the content to display when image load error |\r\n\r\n\r\n","readmeFilename":"README.md"}
![](\"https://img.shields.io/npm/v/vue-previewable-image.svg\")
\r\n \r\n \r\n ![](\"https://img.shields.io/npm/dm/vue-previewable-image.svg\")
\r\n \r\n