Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/dameety/vue-image-preview

An image input preview component in vuejs2
https://github.com/dameety/vue-image-preview

Last synced: about 2 months ago
JSON representation

An image input preview component in vuejs2

Lists

README 

        
# Vue-img-preview [![npm version](https://badge.fury.io/js/vue-img-preview.svg)](https://badge.fury.io/js/vue-img-preview) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/dameety/vue-image-preview/master/License) [![NPM](https://nodei.co/npm/vue-img-preview.png?downloads=true)](https://nodei.co/npm/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)



![demo](https://cloud.githubusercontent.com/assets/10757330/26514483/148ab3b8-426a-11e7-8bd3-e40465e2509e.jpg)



## 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



```



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



  const vm = new Vue({

    ...

  });



```



## Then:



```



```



## Or Just:



```



```



## 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.