init 6.
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
β Usage π
Register the component globally:
Vue.component('vImage', require('v-image'));
Or use locally
import vImage from 'v-image';
β Example π
<v-image alt="Alt Text for the Image" :name="'my-awesome-image'" :img-style="myStyle" @load-image="localVariable"></v-image>
import vImage from 'v-image';
export default {
components: { vImage },
methods: {
localVariable(imageSentFromComponent) {
this.image = imageSentFromComponent;
},
},
data() {
return {
image: '',
myStyle: {
height: '200px',
width: '200px',
},
};
},
};
β π Props:
Name | Type | Required? | Description |
---|---|---|---|
name |
String | Yes | For name attribute for the input field. |
alt |
String | No | For alt attribute for the input field, mostly for proper SEO. |
imgStyle |
Object | No | Styling for the img tag. |
buttonStyle |
Object | No | Styling for the button & label tag. |
β π Events:
load-image
(load the base64 to your custom component's variable (see example)) [default: ""]