vuetify image upload preview

Question

I am using vuetify with vue.js and I try to preview image before upload

The HTML

<v-file-input
  v-on:change="Preview_image($event)"
></v-file-input>
<img id="Preview_image_create" class="Preview_image">

the Vue.js code

methods: {
    Preview_image(e)
    {
         console.log(e);
         if (e.target.files && e.target.files[0])
         {
          
         }
    },

when choosing an image it gives an error

Cannot read property 'files' of undefined"

logging e gives:

File {name: "148200_4580089360895_1364944205_n.jpg", lastModified: 1374722747086, lastModifiedDate: Thu Jul 25 2013 05:25:47 GMT+0200 (Eastern European Standard Time), webkitRelativePath: "", size: 8506, …}
lastModified: 1374722747086
lastModifiedDate: Thu Jul 25 2013 05:25:47 GMT+0200 (Eastern European Standard Time) {}
name: "148200_4580089360895_1364944205_n.jpg"
size: 8506
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File

so how to preview the image?

Answer 1

Template Without using jQuery. I have used v-img tag but you can use img tag as well.

<v-file-input 
   @change="Preview_image"
   v-model="image"
   >
</v-file-input>
<v-img :src="url"></v-img>

Script: event sent automatically no need to send it

  new Vue({
  el: '#app',
  data() {
    return {
      url: null,
      image: null,
    }
  },
  methods: {
    Preview_image() {
      this.url= URL.createObjectURL(this.image)
    }
  }
})

Answer 2

My solution is:

Template:

<v-file-input v-model="image" />
<v-img :src="url" />

Script:

new Vue({
 data() {
    return {
      image: null
    }
  },
  computed: {
    url() {
      if (!this.image) return;
      return URL.createObjectURL(this.image);
    }
  }
})

Answer 3

I've come up with this solution:

Preview_image(e) {
    if (e) {
        $('#image_id').attr('src', URL.createObjectURL(e)); // jQuery selector
    }
},