vue-image-preview's Introduction

Vue-img-preview

This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input.

looks like this (without the form)

Installation

	npm install vue-img-preview --save

Import

import Vue from 'vue'
import {vueImgPreview} from 'vue-img-preview'

Vue.component('vue-img-preview', vueImgPreview)

Browser Usage

<script src="path/to/vue/vue.js"></script>
<script src="path/to/dist/vue-img-preview.js"></script>

<script>

  Vue.component('vue-img-preview', vueImgPreview)

  const vm = new Vue({
    ...
  });

</script>

Then:

<vue-img-preview

	input-name= "profile_picture"
	default-image= "https://placehold.it/350x150"
	bg-color= "#ffffff"
	text-color= "#000000"
	alt-text="profile picture"
    button-text="Choose image"
    picker-style="regular"

></vue-img-preview>

Or Just:

<vue-img-preview></vue-img-preview>

Props

Name	Default	Type	Decsription
input-name	file	String	name of the file input field
default-image		String	an image to display when the component loads before the user clicks the file input
bg-color	#037B38	String	background color of the select button
text-color	#ffffff	String	color of the select text
alt-text	vue img preview	String	alternative text for the image
button-text	Choose an image	String	text to show on the button
picker-style	Regular	String	how the image picker should be displayed. Button-text, text-color & bg-color won't work with this.

vue-image-preview's People

Contributors

Stargazers

Watchers

vue-image-preview's Issues

bootstrap

just thought I'd mention that I like this component but ended up having to copy the code and change it locally since the required inclusion of bootstrap completely obliterated the look and feel of my project once I added this to it, since I am not using bootstrap. So I used the code minus bootstrap and it works great.

Maybe you could add a prop or something to disable bootstrap if it isn't wanted..

Recommend Projects