{"id":18283367,"url":"https://github.com/vinayakkulkarni/v-image","last_synced_at":"2026-04-02T19:58:02.627Z","repository":{"id":25525743,"uuid":"104332958","full_name":"vinayakkulkarni/v-image","owner":"vinayakkulkarni","description":":camera: Tiny little component for input type=file (css free! style it as you want!)","archived":false,"fork":false,"pushed_at":"2025-07-01T19:19:17.000Z","size":8746,"stargazers_count":40,"open_issues_count":11,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-02T00:10:02.219Z","etag":null,"topics":["image-component","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://v-image.netlify.app/","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/vinayakkulkarni.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-09-21T10:13:33.000Z","updated_at":"2025-06-01T19:46:27.000Z","dependencies_parsed_at":"2024-04-18T20:49:21.942Z","dependency_job_id":"cd2a4eac-d009-4717-9ffa-c95f58e1deb0","html_url":"https://github.com/vinayakkulkarni/v-image","commit_stats":{"total_commits":1056,"total_committers":6,"mean_commits":176.0,"dds":0.21875,"last_synced_commit":"d9b36d4e1d6911ad2fd2e8620aa2b62ab4b16b78"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/vinayakkulkarni/v-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinayakkulkarni","download_url":"https://codeload.github.com/vinayakkulkarni/v-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinayakkulkarni%2Fv-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265479368,"owners_count":23773525,"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","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-component","vue","vuejs","vuejs2"],"created_at":"2024-11-05T13:09:05.920Z","updated_at":"2026-04-02T19:58:02.584Z","avatar_url":"https://github.com/vinayakkulkarni.png","language":"Vue","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","Form"],"readme":"# [v-image](https://vinayakkulkarni.github.io/v-image/) 📷\n\n[![CI](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-offline/ci.yml?label=CI\u0026branch=main\u0026logo=github-actions)](https://github.com/vinayakkulkarni/v-offline/actions/workflows/ci.yml)\n[![CodeQL](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-offline/codeql.yml?label=CodeQL\u0026branch=main\u0026logo=github-actions)](https://github.com/vinayakkulkarni/v-offline/actions/workflows/codeql.yml)\n[![Ship.js Trigger](https://img.shields.io/github/actions/workflow/status/vinayakkulkarni/v-offline/shipjs-trigger.yml?label=⛴%20Ship.js%20trigger)](https://github.com/vinayakkulkarni/v-offline/actions/workflows/shipjs-trigger.yml)\n[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/vinayakkulkarni/v-image?sort=semver\u0026logo=github)](https://github.com/vinayakkulkarni/v-image/releases)\n[![npm](https://img.shields.io/npm/v/v-image?logo=npm)](https://www.npmjs.com/package/v-image)\n[![npm](https://img.shields.io/npm/dm/v-image?logo=npm)](http://npm-stat.com/charts.html?package=v-image)\n[![npm (downloads)](https://img.shields.io/npm/dt/v-image.svg?logo=npm)](https://npm-stat.com/charts.html?package=v-image)\n[![npm bundle size (version)](https://img.shields.io/bundlephobia/min/v-image/latest)](https://bundlephobia.com/package/v-image@latest)\n[![npm type definitions](https://img.shields.io/npm/types/v-image)](https://github.com/vinayakkulkarni/v-image/blob/master/package.json)\n[![DeepScan grade](https://deepscan.io/api/teams/9055/projects/11604/branches/426884/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=9055\u0026pid=11604\u0026bid=426884)\n[![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/vinayakkulkarni/v-image)](https://snyk.io/test/github/vinayakkulkarni/v-image)\n[![license](https://img.shields.io/npm/l/v-image)](https://github.com/vinayakkulkarni/v-image/blob/master/LICENSE)\n[![GitHub contributors](https://img.shields.io/github/contributors/vinayakkulkarni/v-image)](https://github.com/vinayakkulkarni/v-image/graphs/contributors)\n\n[![eslint](https://img.shields.io/npm/dependency-version/v-image/dev/eslint?logo=eslint)](https://eslint.org/)\n[![prettier](https://img.shields.io/npm/dependency-version/v-image/dev/prettier?logo=prettier)](https://prettier.io/)\n[![vite](https://img.shields.io/npm/dependency-version/v-image/dev/vite?logo=vite)](https://vitejs.dev/)\n[![vue](https://img.shields.io/npm/dependency-version/v-image/dev/vue?logo=vue.js)](https://vuejs.org/)\n[![typescript](https://img.shields.io/npm/dependency-version/v-image/dev/typescript?logo=TypeScript)](https://www.typescriptlang.org/)\n\n⚠️ Docs are for Vue 3, for Vue 2 docs, check [this tree](https://github.com/vinayakkulkarni/v-image/tree/v2.6.1#readme)\n\n## Demo\n\n[![Edit v-image](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/v-image?file=src/App.vue)\n\n## Features\n\n- 💪 Built with [TypeScript](https://www.typescriptlang.org/)\n- 🌠 Built with [Vue 3](https://vuejs.org/)\n- ⚡ Zero dependencies.\n\n## Table of Contents\n\n- [v-image 📷](#v-image-)\n  - [Demo](#demo)\n  - [Features](#features)\n  - [Table of Contents](#table-of-contents)\n    - [Installation](#installation)\n    - [Build Setup](#build-setup)\n    - [Usage](#usage)\n    - [Example](#example)\n    - [API](#api)\n      - [Props](#props)\n      - [Events](#events)\n  - [Contributing](#contributing)\n  - [Author](#author)\n\n### Installation\n\n```bash\nnpm i v-image\n```\n\n### Build Setup\n\n```bash\n# install dependencies\n$ npm install\n\n# package lib\n$ npm run build\n```\n\n### Usage\n\nGlobal component:\n\n```js\n// main.ts\nimport { VImage } from 'v-image';\nimport { createApp } from 'vue';\n\nconst app = createApp({});\napp.component('VImage', VImage);\n```\n\nOr use locally\n\n```js\n// component.vue\n\u003cscript lang=\"ts\"\u003e\nimport { VImage } from 'v-image';\n\nexport default defineComponent({\n  components: {\n    VImage,\n  },\n})\n\u003c/script\u003e\n```\n\nFor Nuxt 3, create a file in `plugins/v-image.ts`\n\n```js\nimport { VImage } from 'v-image';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.component('VImage', VImage);\n});\n```\n\nthen import the file in `nuxt.config.{j|t}s`:\n\n```js\nexport default {\n  // ...\n  plugins: [\n    // ...\n    { src: '~/plugins/v-image', mode: 'client' },\n    // ...\n  ],\n  // ...\n};\n```\n\n### Example\n\n```html\n\u003ctemplate\u003e\n  \u003cv-image\n    wrapper=\"flex justify-center items-center content-center w-full h-full\"\n    :placeholder=\"placeholder\"\n    :form=\"form\"\n    :uploaded=\"uploaded\"\n    @image-loaded=\"onImageLoad\"\n    @image-removed=\"onImageRemove\"\n  /\u003e\n\u003c/template\u003e\n```\n\n```js\n\u003cscript lang=\"ts\"\u003e\n  import { defineComponent, ref } from 'vue';\n  import type { Ref } from 'vue';\n  import { VImage } from 'v-image';\n\n  export default defineComponent({\n    components: { VImage },\n    setup() {\n      const image: Ref\u003cnull | string\u003e = ref(null);\n      const placeholder = ref({\n        image: 'https://picsum.photos/1000/1000',\n        alt: 'Placeholder Image',\n        imgClass: 'block rounded object-contain min-h-0 w-72',\n        btnClass:\n          'cursor-pointer inline-flex items-center justify-center mt-4 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 w-72',\n        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',\n      });\n      const form = ref({\n        name: 'myImage',\n        label: 'Select Image',\n        accept: 'image/jpg',\n      });\n      const uploaded = ref({\n        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',\n        alt: 'User uploaded dope image',\n        imgClass: 'block rounded object-contain min-h-0 w-72',\n        btnClass:\n          'cursor-pointer inline-flex items-center justify-center mt-4 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 w-72',\n        removeBtnText: 'Remove image',\n      });\n\n      const onImageLoad = (img: string) =\u003e {\n        image.value = img;\n      };\n      const onImageRemove = (deleted: boolean) =\u003e {\n        if (deleted) {\n          image.value = null;\n        }\n      };\n\n      return {\n        placeholder,\n        form,\n        uploaded,\n        onImageLoad,\n        onImageRemove,\n      };\n    },\n  });\n\u003c/script\u003e\n```\n\n### API\n\n#### Props\n\n| Name                     | Type   | Required? | Default                         | Description                                        |\n| ------------------------ | ------ | --------- | ------------------------------- | -------------------------------------------------- |\n| `wrapper`                | String | No        | ''                              | The wrapper classes for the top level `\u003cdiv\u003e`      |\n| `placeholder`            | Object | No        | -                               | The placeholder image \u0026 input related code         |\n| `placeholder.wrapper`    | String | No        | ''                              | Any wrapper classes for the placeholder `\u003cdiv\u003e`    |\n| `placeholder.image`      | String | No        | 'https://picsum.photos/200x200' | The placeholder image                              |\n| `placeholder.alt`        | String | No        | 'Placeholder Image'             | The placeholder image alt attribute                |\n| `placeholder.imgClass`   | String | No        | ''                              | Any placeholder image classes                      |\n| `placeholder.btnClass`   | String | No        | ''                              | `Select Image` button classes                      |\n| `form`                   | Object | No        | -                               | The placeholder input form                         |\n| `form.name`              | String | No        | 'v-image'                       | Enable the label to interact with the `\u003cinput /\u003e`  |\n| `form.label`             | String | No        | 'Select Image'                  | The label/button text                              |\n| `form.accept`            | String | No        | 'image/\\*'                      | Abilty to accept file types                        |\n| `uploaded`               | Object | No        | -                               | The user uploaded image related `Object`           |\n| `uploaded.wrapper`       | String | No        | ''                              | Any wrapper classes for the uploaded image `\u003cdiv\u003e` |\n| `uploaded.alt`           | String | No        | 'Very Interesting Image'        | The actual uploaded image alt attribute            |\n| `uploaded.imgClass`      | String | No        | ''                              | Uploaded image classes                             |\n| `uploaded.btnClass`      | String | No        | ''                              | `Remove Image` button classes                      |\n| `uploaded.removeBtnText` | String | No        | 'Remove Image'                  | `Remove Image` button text                         |\n\n#### Events\n\n| Name             | Returns | Description                        |\n| ---------------- | ------- | ---------------------------------- |\n| `@image-loaded`  | String  | Sends the image in `base64` format |\n| `@image-removed` | Boolean | Emits `true` if image is removed   |\n\n## Contributing\n\n1. Fork it ([https://github.com/vinayakkulkarni/v-image/fork](https://github.com/vinayakkulkarni/v-image/fork))\n2. Create your feature branch (`git checkout -b feat/new-feature`)\n3. Commit your changes (`git commit -Sam 'feat: add feature'`)\n4. Push to the branch (`git push origin feat/new-feature`)\n5. Create a new [Pull Request](https://github.com/vinayakkulkarni/v-image/compare)\n\n_Note_:\n\n1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)\n2. Commits \u0026 PRs will be allowed only if the commit messages \u0026 PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_\n3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_\n\n## Author\n\n**v-image** © [Vinayak](https://github.com/vinayakkulkarni), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-image/contributors)).\n\n\u003e [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\\_vinayak_k](https://twitter.com/_vinayak_k)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayakkulkarni%2Fv-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinayakkulkarni%2Fv-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinayakkulkarni%2Fv-image/lists"}