v-image
📷
- This is on GitHub so let me know if I've b0rked it somewhere, give me a star
⭐ if you like it🍻 - Demo here -> v-image
✅
Install
👌
npm i v-image
// or
yarn add v-image
CDN: UNPKG | jsDelivr (available as window.VImage)
✅
Usage
🎓
Register the component globally:
Vue.component('vImage', require('v-image'));
Or use locally
import vImage from 'v-image';
✅
Example
🍀
<template>
<v-image
wrapper="flex justify-center items-center content-center w-full h-full"
:place-holder="placeholder"
:uploaded="uploaded"
@load-image="saveImage"
@remove-image="removeImage"
/>
</template>
/* Used Tailwind Utility classes, checkout the example dir */
import vImage from 'v-image';
export default {
components: { vImage },
data: () => ({
placeholder: {
wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
image: 'https://picsum.photos/1000/1000',
alt: 'Placeholder Image',
imgClass: 'block rounded object-contain object-center max-w-xs',
btnClass: 'block btn cursor-pointer text-center',
form: {
name: 'myImage',
label: 'Select an Image',
accept: 'image/jpg',
},
},
uploaded: {
wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
alt: 'User uploaded dope image',
imgClass: 'block rounded object-contain object-center max-w-xs',
btnClass: 'block btn cursor-pointer text-center w-full',
removeBtnText: 'Remove image',
},
image: '',
}),
methods: {
saveImage(imageSentFromComponent) {
this.image = imageSentFromComponent;
},
removeImage() {
this.image = null;
},
},
};
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 |
placeHolder.form |
Object | No | - | The placeholder input form |
placeHolder.form.name |
String | No | 'v-image' | Enable the label to interact with the <input /> |
placeHolder.form.label |
String | No | 'Select Image' | The label/button text |
placeHolder.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:
@load-image(load the base64 to your custom component's variable (see example))@remove-image(let the parent know the remove label was clicked)
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
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
542 Oct 9, 2022
18 Nov 24, 2022
12 Oct 12, 2022
454 Dec 24, 2022
13 Nov 24, 2022
28 Jan 2, 2023
2 May 22, 2021
289 Dec 31, 2022
20 Jun 22, 2022
3 Jan 31, 2022
19 Oct 12, 2022
74 Nov 24, 2022
365 Dec 14, 2022
1.6k Dec 29, 2022
39 Dec 11, 2022
32 Aug 6, 2022
53 Dec 21, 2022
256 Dec 26, 2022
0 Dec 28, 2020
0 May 9, 2022