An image input preview component in vuejs2

Related tags

Type Select vue-image-preview
Overview

Vue-img-preview npm version GitHub license NPM

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

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

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.
You might also like...
Admin template based on vuejs2 and element.
Admin template based on vuejs2 and element.

demo: https://taylorchen709.github.io/vue-admin/ To start This is a project template for vue-cli # install dependencies npm install # serve with hot

taylor 6.7k Dec 28, 2022
Vuejs2 AdminLte3 template more than 50 components and 10 directives
Vuejs2 AdminLte3 template more than 50 components and 10 directives

Vuejs2 AdminLte3 template more than 50 components and 10 directives.such as collapse ,sidebar,container,infobox,breadcrumb,card,grid,dropdown,toast,navbar,timeline,icon,progress

姚欣 55 Nov 25, 2022
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop
A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop

v-uploader A Vue2 plugin make files upload simple and easier, single file upload with image preview, multiple upload with drag and drop Examples and D

Terry Zeng 231 Nov 21, 2022
A light vue dialog plugin with loading animation and image preview

vue-dialog-loading A light vue dialog plugin with loading animation and image preview View the Demo and its source for more. Install npm install --sav

lisper 9 Sep 23, 2021
Configurable image uploader with preview
Configurable image uploader with preview

vue-upload-image Configurable image uploader with preview drag and drop with input backup image previews simple resizing events minimal configurable I

Viral-Vector 34 Apr 20, 2022
Vue Multiple Image Upload With Preview.
Vue Multiple Image Upload With Preview.

Vue Multiple Image Upload Welcome Back Hello Everyone,My name is Zin Min Htet and here is my Facebook account. Now, I will show you how to Upload Mult

Zin Min Htet 2 Nov 8, 2022
Vue Currency Input component allows an easy input of currency formatted numbers
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (curren

WeblineIndia 1 May 25, 2022
🎡 A component for rendering Vue components with live editor and preview.
🎡 A component for rendering Vue components with live editor and preview.

Vuep (vue playground) 🎡 A component for rendering Vue components with live editor and preview. Links Docs: https://cinwell.com/vuep/ An online playgo

cinwell.li 878 Dec 15, 2022
Vue component for generate a link preview
Vue component for generate a link preview

link-prevue A flexible component for generating a link preview Live Demo. Demo repository. Intallation npm install link-prevue Basic usage Javascript

Nivaldo Martinez Urueta 228 Dec 30, 2022
A markdown editor component for Vue that renders in place without the need for a preview pane.
A markdown editor component for Vue that renders in place without the need for a preview pane.

vue-markdown-editor A Markdown editor component for Vue that renders in place without the need for a preview pane. This is the component tha

David R. Myers 68 Aug 20, 2022
🖼️ Vue component that provides drag and drop images upload with preview.
🖼️ Vue component that provides drag and drop images upload with preview.

🖼️ Vue component that provides drag and drop images upload with preview.

Youssef 78 Nov 19, 2022
A preview component of the creator with more information on hover.
A preview component of the creator with more information on hover.

A preview component of the creator with more information on hover.

Gobie Nanthakumar 6 Jun 20, 2021
🎡 A component for rendering Vue components with live editor and preview.
🎡 A component for rendering Vue components with live editor and preview.

Vuep (vue playground) 🎡 A component for rendering Vue components with live editor and preview. Links Docs: https://cinwell.com/vuep/ An online playgo

cinwell.li 878 Dec 15, 2022
Media-upload - Vue 3 component for multiple images upload with preview.
Media-upload - Vue 3 component for multiple images upload with preview.

🖼️ Media-Upload 📷 media-upload is a vue package for multiple images upload with preview. 🖼️ media-upload support the create and the update form, an

Mohamed Hafidi 0 Mar 21, 2022
🖼️Vue component that provides drag and drop images & videos upload with preview
🖼️Vue component that provides drag and drop images & videos upload with preview

Vue Medias Upload Component Vue component that provides drag and drop images & videos upload with preview.

Younes B 1 Oct 17, 2022
A markdown preview component for vue.

A markdown preview component for vue.

蓝月萧枫 0 May 18, 2018
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

EducationLink 589 Dec 29, 2022
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Terry Zeng 74 Aug 27, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Comments
  • bootstrap

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

    opened by b9techsrc 0
Owner
Dammy
Developer.
Dammy
GitHub
:camera: Tiny little component for input type=file (css free! style it as you want!)

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-

Vinayak Kulkarni 38 Dec 14, 2022
A versetile tag input component built with Vue 3 Composition API

TagInput A versetile tag input component built with Vue 3 Composition API. live demo Please checkout our Vue JS course Use code HAPPY_LEARNING or get

Mayank 12 Oct 12, 2022
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

Voerro 454 Dec 24, 2022
🏞 A graceful image type inputer / uploader

点击查看中文文档 | Have a glance at Demo Intro <input type="file" /> like, only support single image auto-upload support drop-select / preview / use as <img /

Bruce Weng 563 Jan 3, 2023
A simple tag selector as a vue component.

Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation. Check out the demo I

Tom Quinonero 13 Nov 24, 2022
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

Alessio Maffeis 884 Dec 25, 2022
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

C.H Lee 0 Sep 24, 2019
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more.

vue-picture-input Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. Installation npm

Robert 0 Jun 14, 2018
A simple cross browser supported vuejs2 scroll fixed header component

A simple cross browser supported vuejs2 scroll fixed header component

Benny Guo 4 May 24, 2022
A very simple Blog with Admin Panel built using Laravel5.7 && VueJs2.5 - Quasar0.17

Q-Blog - A very simple Blog with Admin Panel built using [Laravel5.7, VueJs2.5, Quasar0.17]. - This is kind of implementation on different concepts in

Abdelaziz Sliem 132 Dec 23, 2022