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

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