# vuejs-image

> VueJS 2.x Image selection replacement for

Latest version **1.0.3** (published 2017-07-18) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vuejs-image
pnpm add vuejs-image
yarn add vuejs-image
bun add vuejs-image
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-07-18 |
| First published | 2017-07-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Vinayak Kulkarni |
| Maintainers | vinayakkulkarni |
| Keywords | vue2, vuejs, semantic-ui, form, input, file |

## Links

- npm: https://www.npmjs.com/package/vuejs-image
- Repository: https://github.com/vinayakkulkarni/vuejs-image
- Homepage: https://github.com/vinayakkulkarni/vuejs-image#readme
- Issues: https://github.com/vinayakkulkarni/vuejs-image/issues
- npm.io page: https://npm.io/package/vuejs-image

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.3.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2017-07-18
- 1.0.2 — 2017-07-17
- 1.0.1 — 2017-07-17
- 1.0.0 — 2017-07-17

## README

# Vue Image :zap:

+ This is [on GitHub](https://github.com/vinayakkulkarni/vue-image)  so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:

### :white_check_mark: Install :ok_hand:
``` npm i vuejs-image```

### :white_check_mark: Usage :mortar_board:
- Add it to your component  :tada:

```javascript
import vueImage from 'vuejs-image';

export default {
	components : { vueImage },
	data() : {
		return {
			image: ''
		},
	},
	methods: {
		localVariable(imageSentFromComponent) {
			this.image = imageSentFromComponent;
		}
	}
}
```

### :white_check_mark: Example :four_leaf_clover: 

```html
<vue-image 
	alt="Alt Text for the Image" 
	name="name"
	maxWidth="100px"
	maxHeight="100px"
	@loadImage="localVariable">
</vue-image>
```
### :white_check_mark: :book: Props: 
+ `id` (ID for html `input`) [default: "name"]
+ `name` (ID for html `input`) [default: "name"]

+ `maxWidth` (Max Width for Image Container)  [default: "200px"]
+ `maxHeight` (Max Height for Image Container)  [default: "200px"]
+ `paddingBottom` (Padding Bottom between Image and Button) [default: "5px"]

### :white_check_mark: :ear: Listener: 
+ `loadImage` (load the base64 to your custom component's variable (see example)) [default: ""]

## NPM :octocat:  

[![NPM](https://nodei.co/npm/vuejs-image.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vuejs-image/)

---
_Source: https://npm.io/package/vuejs-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._