{"id":17033968,"url":"https://github.com/yisibell/vue-previewable-image","last_synced_at":"2025-08-18T19:07:37.636Z","repository":{"id":94294992,"uuid":"607946394","full_name":"yisibell/vue-previewable-image","owner":"yisibell","description":"A previewable image Vue component based on viewerjs.","archived":false,"fork":false,"pushed_at":"2025-06-09T07:39:56.000Z","size":414,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-06T14:49:01.990Z","etag":null,"topics":["component","image","image-component","image-viewer","img","img-preview","lazyload","viewerjs","vue"],"latest_commit_sha":null,"homepage":"https://hongwenqing.com/vue-previewable-image/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yisibell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-01T01:50:15.000Z","updated_at":"2025-06-09T07:39:40.000Z","dependencies_parsed_at":"2024-08-12T07:59:48.880Z","dependency_job_id":"c0e3dbbf-1f43-495e-9a8a-60def8a05571","html_url":"https://github.com/yisibell/vue-previewable-image","commit_stats":{"total_commits":35,"total_committers":1,"mean_commits":35.0,"dds":0.0,"last_synced_commit":"22ff3c58dfd1880f0da561d19be87610925af6f7"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/yisibell/vue-previewable-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fvue-previewable-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fvue-previewable-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fvue-previewable-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fvue-previewable-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisibell","download_url":"https://codeload.github.com/yisibell/vue-previewable-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Fvue-previewable-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270372847,"owners_count":24572430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","image","image-component","image-viewer","img","img-preview","lazyload","viewerjs","vue"],"created_at":"2024-10-14T08:36:57.777Z","updated_at":"2025-08-18T19:07:37.584Z","avatar_url":"https://github.com/yisibell.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/vue-previewable-image\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue-previewable-image.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/vue-previewable-image?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/vue-previewable-image.svg\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n# vue-previewable-image\n\nA **previewable** image Vue component based on \u003ca href=\"https://github.com/fengyuanchen/viewerjs\" target=\"_blank\"\u003eviewerjs\u003c/a\u003e.\n\n\u003e :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).\n\n- See [example](https://hongwenqing.com/vue-previewable-image/) here.\n- [Release Notes](./CHANGELOG.md).\n\n# Features\n\n- :heavy_check_mark: Support preview image via `viewerjs`.\n- :heavy_check_mark: Support image lazy load.\n- :heavy_check_mark: Support using image viewer as a component via [ImageViewer](./docs/image-viewer-component.md).\n\n# Package\n\n| Version | Support Vue version | Docs |\n| :---: | :---: | :---: |\n| `^1.7.0+` | `^2.7.14` | See [v1](https://github.com/yisibell/vue-previewable-image/tree/1.x) |\n| `^2.1.2+` | `^3.2.0` and above | See [v2](https://github.com/yisibell/vue-previewable-image) |\n\n# Installation\n\n```bash\n# pnpm\n$ pnpm add vue-previewable-image\n\n# yarn\n$ yarn add vue-previewable-image\n\n# npm\n$ npm i vue-previewable-image\n```\n\n# Usage\n\n\u003e Do not forgot to import the style `vue-previewable-image/dist/style.css`\n\n```vue\n\u003ctemplate\u003e\n  \u003cmain\u003e\n    \u003cPreviewableImage\n      v-model:current-preview-index=\"currentIndex\"\n      :src=\"src\"\n      :preview-src-list=\"srcList\"\n      :viewer-title=\"viewerTitle\"\n      width=\"100px\"\n      @switch=\"handleSwitch\"\n    /\u003e\n  \u003c/main\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { PreviewableImage } from 'vue-previewable-image'\nimport type { CustomViewerTitle, ViewerSwitchEvent } from 'vue-previewable-image'\n\nconst src =\n  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'\n\nconst srcList = [\n  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',\n  'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',\n]\n\nconst viewerTitle: CustomViewerTitle = (img, { index, total }) =\u003e {\n  console.log('img:', img)\n  return `${img.alt} (${index + 1}/${total})`\n}\n\nconst handleSwitch: ViewerSwitchEvent = (index, viewer) =\u003e {\n  console.log('on switch:', index, viewer)\n}\n\nconst currentIndex = ref(0)\n\u003c/script\u003e\n\n```\n\nYou also can use `viewerjs` from this package, This is equal to `import Viewer from 'viewerjs'`.\n\n```ts\nimport { Viewer } from 'vue-previewable-image'\n```\n\nOr, you can using image viewer as a component, See [ImageViewer](./docs/image-viewer-component.md).\n\n\n## Using via Vue plugin\n\n```ts\n// main.ts\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport PreviewableImage from 'vue-previewable-image'\nimport type { PreviewableImageOptions } from 'vue-previewable-image'\n\nconst app = createApp(App)\n\napp.use(PreviewableImage, {\n  // set global component name\n  componentName: 'PreviewableImage',\n\n  // set Viewer default options\n  defaultViewerOptions: {\n    // ...\n  }\n\n} as PreviewableImageOptions).mount('#app')\n\n```\n\n# Attributes\n\n| Prop name | Description | Type | Available value  | Default value |\n| :----: | :----: | :----: | :----: | :----: |\n| `width` | The **img** container `width` | `string` | - | `undefined` |\n| `height` | The **img** container `height` | `string` | - | `undefined` |\n| `src` | The `src` of **img** | `string` | - | `undefined` |\n| `alt` | The `alt` of **img** | `string` | - | `undefined` |\n| `referrerPolicy` | The `referrerPolicy` of **img** | `string` | - | `undefined` |\n| `lazy` | Whether to enable image lazy load | `boolean` | - | `true` |\n| `zIndex` | Define the CSS `z-index` value of the viewer in modal mode | `number` or `string` | - | `2015` |\n| `fit` | The `object-fit` of **img** | `string` | `fill / contain / cover / none / scale-down` | `fill` |\n| `previewSrcList` | Define your previewable image list  | `string[]` or `{ src: string; alt: string}[]` | - | `[]` |\n| `currentPreviewIndex` | Current preview image shown index, support `v-model`  | `number` | - | `0` |\n| `viewerOptions` | Define [viewerjs Options](https://github.com/fengyuanchen/viewerjs) | - | - | `{}` |\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` |\n\n\n# Events\n\n| Event name | Description | Callback arguments |\n| :---: | :---: | :---: |\n| `switch` | Emit when preview image switch. | `(index: number, viewer: Viewer) =\u003e void` |\n| `load` | Emit when image load success. | `(e: Event) =\u003e void` |\n| `error` | Emit when image load error. | `(e: Event) =\u003e void` |\n\n\n# Slots\n\n| Name | Description |\n| :----: | :----: |\n| `placeholder` | Define the placeholder content to display when image is not loaded |\n| `error` |  Define the content to display when image load error |\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibell%2Fvue-previewable-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisibell%2Fvue-previewable-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibell%2Fvue-previewable-image/lists"}