{"id":31601637,"url":"https://github.com/nullptru/vue-previewer","last_synced_at":"2025-10-06T07:14:56.559Z","repository":{"id":35004342,"uuid":"195559935","full_name":"nullptru/vue-previewer","owner":"nullptru","description":"👀A vue component for previewing images","archived":false,"fork":false,"pushed_at":"2022-12-09T17:19:49.000Z","size":495,"stargazers_count":8,"open_issues_count":10,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-07T14:34:06.032Z","etag":null,"topics":["image-preview","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nullptru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-06T16:22:44.000Z","updated_at":"2022-03-31T11:49:47.000Z","dependencies_parsed_at":"2023-01-15T11:50:59.222Z","dependency_job_id":null,"html_url":"https://github.com/nullptru/vue-previewer","commit_stats":null,"previous_names":["nullptru/vue-preview"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nullptru/vue-previewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullptru%2Fvue-previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullptru%2Fvue-previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullptru%2Fvue-previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullptru%2Fvue-previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nullptru","download_url":"https://codeload.github.com/nullptru/vue-previewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nullptru%2Fvue-previewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278572761,"owners_count":26008871,"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-10-06T02:00:05.630Z","response_time":65,"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":["image-preview","vue"],"created_at":"2025-10-06T07:14:54.460Z","updated_at":"2025-10-06T07:14:56.546Z","avatar_url":"https://github.com/nullptru.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-previewer\n👀 A vue component for previewing images\n\n### Live Demo\n[\u003e\u003e Live Demo](https://geasscn.com/static/vue-previewer/index.html)\n### Features\n+ no other dependencies\n+ support zoom-in, zoom-out, rotate, fullscreen operations\n+ support image events such as select, close\n+ support customer options\n+ support key operation\n+ support footer slot\n\n### Install\n```\n// with yarn\nyarn add vue-image-previewer\n// with npm\nnpm install vue-image-previewer\n```\n\n### Usage\n```\nimport VuePreviewer from 'vue-image-previewer'\n\n// defalut install\nVue.use(VuePreviewer);\n\n// install with global options\nVue.use(VuePreviewer, {\n  defaultWidth: '100px',\n  defaultHeight: '75px',\n  thumbnailStyle: {\n    backgroundSize: 'cover'\n  },\n  keyMap: {\n    zoomin: '+',\n    zoomout: '-',\n    rotate: 'r',\n    prev: 'ArrowLeft',\n    next: 'ArrowRight'\n  }\n})\n```\n\n### Example\n```\nnew Vue({\n  el: '#app',\n  components: { VuePreviewer },\n  data() {\n    return {\n      imgs: [\n        'http://pic.lvmama.com/uploads/pc/place2/2016-09-14/9aab9bb7-2593-4ca6-8c5a-31355443aebc.jpg',\n        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJQQM7xWSl3uRGecETNjaLl8_2wmAvlGpwyzX_Xs3RyZoTsM_j',\n        \"http://crawl.nosdn.127.net/d426f0175b974f7cce092a8f16d0ee09.jpg\",\n        \"http://seopic.699pic.com/photo/50093/5337.jpg_wh1200.jpg\"\n      ]\n    }\n  },\n  template: '\u003cvue-previewer :images=\"imgs\" :options=\"{}\"/\u003e'\n})\n```\n\n### Props\n|Property|Type|Description| Default |\n|---|---|---|---|\n|images|Array[String/ImageOptions]| Images for previewing|**required** |\n|options| PreviewerOptions | Extra options for configing component | {} |\n|mode| \"image\", \"link\" | show image as link or image | \"image\"|\n|showFooter| Boolean | Footer slot | true |\n\n#### ImageOptions\n```\n{\n\tsrc: 'xxx.jpg', // origin image source\n  thumbnailSrc: 'xxxThumbnail.jpg', // thumbnail source\n\twidth: '100px', // thumbnail width\n\theight: '75px', // thumbnail height\n\tname: 'Image Test' // Image name which shows in footer\n}\n```\n#### PreviewerOptions\n```\n// default options\n{\n\tdefaultWidth: '100px', // thumbnail width, '100px' or '20%'\n\tdefaultHeight: '75px', // thumbnailStyle height, '100px' or '20%'\n\tthumbnailStyle: { backgroundSize: 'cover' },\n  keyMap: {\n    zoomin: '+',\n    zoomout: '-',\n    rotate: 'r',\n    prev: 'ArrowLeft',\n    next: 'ArrowRight'\n  }\n}\n```\n\n### Events\n|Event| Description|Parameters|\n|---|---|---|\n|close| Trigger when component is closed|\n|select| Trigger when select a image from list| Selected image(ImageOptions)|\n\n### slot\n| Name | Parameters |\n|---|---|\n| footer | Current ImageOptions|\n\n\n#### 🤗 Please feel free to contribute a PR or make an issue\n\n### License\nVuePreviewer is [MIT Licensed](https://github.com/nullptru/vue-previewer/blob/master/LICENSE).\n\nCopyright (c) 2019 Geass\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullptru%2Fvue-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnullptru%2Fvue-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnullptru%2Fvue-previewer/lists"}