/vuejs-image

🎉 Vue Image Component replacing native <input type="file" />

Primary LanguageVueMIT LicenseMIT

Vue Image ⚡

  • This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻

✅ Install 👌

npm i vuejs-image

✅ Usage 🎓

  • Add it to your component 🎉
import vueImage from 'vuejs-image';

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

✅ Example 🍀

<vue-image 
	alt="Alt Text for the Image" 
	name="name"
	maxWidth="100px"
	maxHeight="100px"
	@loadImage="localVariable">
</vue-image>

✅ 📖 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"]

✅ 👂 Listener:

  • loadImage (load the base64 to your custom component's variable (see example)) [default: ""]

NPM :octocat:

NPM