Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue image preview

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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

Component name: Vue-img-preview


image preview

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>

Github: http://github.com/dameety/vue-image-preview#readme


© vuejsexamples.net - Privacy Policy - Cookie Policy