npmpackage.info

Gathering detailed insights and metrics for v-image

Gathering detailed insights and metrics for v-image

v-image - 3.1.2 | npmpackage.info

v-image

📷 Tiny little component for input type=file (css free! style it as you want!)

3.1.2

40

MIT

Vue

45.62 kB

Installations

npm install v-image

Developer Guide

BETA

Typescript

Yes

Module System

ESM, UMD

Min. Node Version

>=18.13.0

Node Version

18.19.1

NPM Version

10.2.4

Pull Requests

Open

10

Total

2,460

Closed

860

Merged

1,590

Issues

Open

1

Total

3

Closed

2

Releases

20

v3.1.2

Updated on Mar 21, 2024

v3.1.1

Updated on Dec 28, 2023

v3.1.0

Updated on Apr 01, 2023

v3.0.3

Updated on Jan 28, 2023

v3.0.2

Updated on Nov 08, 2022

v3.0.1

Updated on Nov 01, 2022

View All 20 releases

Languages

5

Vue

JavaScript

TypeScript

CSS

HTML

Vue (56.43%)

JavaScript (18.54%)

TypeScript (17.32%)

CSS (5.06%)

HTML (2.66%)

Developer

vinayakkulkarni

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

40 Stars

3,285 Commits

4 Forks

2 Watchers

12 Branches

2 Contributors

Updated on Jun 01, 2025

Maintainers

1

View All 2 Contributors

Package Meta Information

Latest Version

3.1.2

Package Id

v-image@3.1.2

Unpacked Size

45.62 kB

Size

10.58 kB

File Count

12

NPM Version

10.2.4

Node Version

18.19.1

Published on

Mar 21, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

v-image 📷

⚠️ Docs are for Vue 3, for Vue 2 docs, check this tree

Demo

Features

💪 Built with TypeScript
🌠 Built with Vue 3
⚡ Zero dependencies.

Table of Contents

v-image 📷
- Demo
- Features
- Table of Contents
  - Installation
  - Build Setup
  - Usage
  - Example
  - API
    - Props
    - Events
- Contributing
- Author

Installation

1npm i v-image

Build Setup

1# install dependencies
2$ npm install
3
4# package lib
5$ npm run build

Usage

Global component:

1// main.ts
2import { VImage } from 'v-image';
3import { createApp } from 'vue';
4
5const app = createApp({});
6app.component('VImage', VImage);

Or use locally

1// component.vue
2<script lang="ts">
3import { VImage } from 'v-image';
4
5export default defineComponent({
6  components: {
7    VImage,
8  },
9})
10</script>

For Nuxt 3, create a file in plugins/v-image.ts

1import { VImage } from 'v-image';
2
3export default defineNuxtPlugin((nuxtApp) => {
4  nuxtApp.vueApp.component('VImage', VImage);
5});

then import the file in nuxt.config.{j|t}s:

1export default {
2  // ...
3  plugins: [
4    // ...
5    { src: '~/plugins/v-image', mode: 'client' },
6    // ...
7  ],
8  // ...
9};

Example

1<template>
2  <v-image
3    wrapper="flex justify-center items-center content-center w-full h-full"
4    :placeholder="placeholder"
5    :form="form"
6    :uploaded="uploaded"
7    @image-loaded="onImageLoad"
8    @image-removed="onImageRemove"
9  />
10</template>

1<script lang="ts">
2  import { defineComponent, ref } from 'vue';
3  import type { Ref } from 'vue';
4  import { VImage } from 'v-image';
5
6  export default defineComponent({
7    components: { VImage },
8    setup() {
9      const image: Ref<null | string> = ref(null);
10      const placeholder = ref({
11        image: 'https://picsum.photos/1000/1000',
12        alt: 'Placeholder Image',
13        imgClass: 'block rounded object-contain min-h-0 w-72',
14        btnClass:
15          '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',
16        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
17      });
18      const form = ref({
19        name: 'myImage',
20        label: 'Select Image',
21        accept: 'image/jpg',
22      });
23      const uploaded = ref({
24        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
25        alt: 'User uploaded dope image',
26        imgClass: 'block rounded object-contain min-h-0 w-72',
27        btnClass:
28          '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',
29        removeBtnText: 'Remove image',
30      });
31
32      const onImageLoad = (img: string) => {
33        image.value = img;
34      };
35      const onImageRemove = (deleted: boolean) => {
36        if (deleted) {
37          image.value = null;
38        }
39      };
40
41      return {
42        placeholder,
43        form,
44        uploaded,
45        onImageLoad,
46        onImageRemove,
47      };
48    },
49  });
50</script>

API

Props

Name	Type	Required?	Default	Description
`wrapper`	String	No	''	The wrapper classes for the top level `<div>`
`placeholder`	Object	No	-	The placeholder image & input related code
`placeholder.wrapper`	String	No	''	Any wrapper classes for the placeholder `<div>`
`placeholder.image`	String	No	'https://picsum.photos/200x200'	The placeholder image
`placeholder.alt`	String	No	'Placeholder Image'	The placeholder image alt attribute
`placeholder.imgClass`	String	No	''	Any placeholder image classes
`placeholder.btnClass`	String	No	''	`Select Image` button classes
`form`	Object	No	-	The placeholder input form
`form.name`	String	No	'v-image'	Enable the label to interact with the `<input />`
`form.label`	String	No	'Select Image'	The label/button text
`form.accept`	String	No	'image/*'	Abilty to accept file types
`uploaded`	Object	No	-	The user uploaded image related `Object`
`uploaded.wrapper`	String	No	''	Any wrapper classes for the uploaded image `<div>`
`uploaded.alt`	String	No	'Very Interesting Image'	The actual uploaded image alt attribute
`uploaded.imgClass`	String	No	''	Uploaded image classes
`uploaded.btnClass`	String	No	''	`Remove Image` button classes
`uploaded.removeBtnText`	String	No	'Remove Image'	`Remove Image` button text

Events

Name	Returns	Description
`@image-loaded`	String	Sends the image in `base64` format
`@image-removed`	Boolean	Emits `true` if image is removed

Contributing

Fork it (https://github.com/vinayakkulkarni/v-image/fork)
Create your feature branch (git checkout -b feat/new-feature)
Commit your changes (git commit -Sam 'feat: add feature')
Push to the branch (git push origin feat/new-feature)
Create a new Pull Request

Note:

Please contribute using GitHub Flow
Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
PS. Ensure your commits are signed. Read why

Author

v-image © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

Empty State

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

SAST

Determines if the project uses static code analysis.

3

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/automerger.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/automerger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/demo.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/demo.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/demo.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/demo.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/demo.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/demo.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint-pr.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/lint-pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint-pr.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/lint-pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/shipjs-trigger.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/shipjs-trigger.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/shipjs-trigger.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/shipjs-trigger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/shipjs-trigger.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/shipjs-trigger.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/shipjs-trigger.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/shipjs-trigger.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/vinayakkulkarni/v-image/stale.yml/main?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 9 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

Score

5.3

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.