<div id="app" v-cloak>
  <p>
  <input type="file" accept="image/*" ref="myFile" @change="previewFile">
  </p>
  <img v-if="imgsrc" :src="imgsrc" class="imgpreview">
</div>
[v-cloak] {display: none}

.imgpreview {
  max-width:500px;
  max-height:500px;
}
Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el:'#app',
  data: {
    imgsrc:''
  },
  methods:{
    previewFile() {
      let file = this.$refs.myFile.files[0];
      if(!file || file.type.indexOf('image/') === -1) return;
      let reader = new FileReader();

      reader.onload = e => {
        this.imgsrc = e.target.result;
      }

      reader.readAsDataURL(file);
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue