Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue image preview

Related course:
Fullstack Vue: The Complete Guide to Vue.js

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


npm install vue-img-preview --save


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>


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

const vm = new Vue({




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


Or Just:


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

© vuejsexamples.net - Privacy Policy - Cookie Policy