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
npm i v-image
// or
yarn add v-imageRegister the component globally:
Vue.component('vImage', require('v-image'));Or use locally
import vImage from 'v-image'; <v-image alt="Alt Text for the Image" name="name" @load-image="localVariable" :add-label="'My Custom Label'" :remove-label="'My Custom Remove Label'"></v-image>import vImage from 'v-image';
export default {
components: { vImage },
methods: {
localVariable(imageSentFromComponent) {
this.image = imageSentFromComponent;
},
},
data() {
return {
image: '',
style: {
height: '200px',
width: '200px',
},
};
},
};| Name | Type | Required? | Default | Description |
|---|---|---|---|---|
name |
String | Yes | -- | For name attribute for the input field. |
alt |
String | No | Very Interesting Image |
For alt attribute for the input field, mostly for proper SEO. |
imgStyle |
Object | No | -- | Styling for the img tag. |
add-label |
String | No | Select Image |
Label text shown to user where he clicks and select image popup is shown. |
buttonStyle |
Object | No | -- | Styling for the button & label tag. |
remove-label |
String | No | Remove Image |
Button text shown to user where he clicks and image data is cleared. |
load-image(load the base64 to your custom component's variable (see example)) [default: ""]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent