This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input.
npm install vue-img-preview --save
import Vue from 'vue'
import {vueImgPreview} from 'vue-img-preview'
Vue.component('vue-img-preview', vueImgPreview)
<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>
<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>
<vue-img-preview></vue-img-preview>
| 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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent