How to render File object to HTML element (using Vue.js)

Question

I'm having some problems rendering an image in a HTML element. I think the solution might be simple for experienced front end devs. I have a Vuetify component that lets user input a profile image:

<v-form>
   <v-avatar size="144">
       <v-icon hidden ref="default_icon" size="144">account_circle</v-icon>
       <img ref="my_img" style="display: none;" :src="my_photo.name">
       <v-btn @click="$refs.my_input.click()" class="img_btn" absolute right small fab dark color="pink">
           <v-icon dark>add</v-icon>
       </v-btn>
       <input ref="my_input" hidden type="file" accept="image/*" @change="onFileChange($refs.my_input)">
   </v-avatar>
</v-form>

When the element calls onFileChange it pass the HTML element to the function.

onFileChange(event) {
    this.my_photo = event.files[0]
    console.log(this.my_photo)
    this.$refs.default_icon.style.display = "none"
    this.$refs.my_img.style.display = "inline"
}

So now the function replaces the icon with the img tag. I want to fill the image tag with the image that the user inputs. this.my_photo is a File type variable. Does anyone know how to do this? Regards for everyone!

Steven B. · Accepted Answer · 2019-01-28 14:54:33Z

5

my_photo.name is literally just the name of the uploaded image. You need to convert the uploaded image to a valid format for the image src.

You can do this a couple ways using either FileReader.readAsDataURL() or URL.createObjectURL(). These create source representations that the image tag can use.

Keep in mind that if you plan on uploading this image to a server you will need to keep a reference to event.target.files[0].

Here an example using URL.createObjectURL().

new Vue({
  el: "#app",
  data: {
    my_photo: '',
  },
  methods: {
    onFileInput(event) {    	   
      const data = URL.createObjectURL(event.target.files[0]);
      this.my_photo = data;
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <input type="file" @change="onFileInput($event)">
  <img :src="my_photo" alt="">
</div>

edited Jan 28, 2019 at 14:54

answered Jun 1, 2018 at 22:32

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

allnuck Over a year ago

Thank you! this is exactly what i was looking for. I really appreciate it.

Collectives™ on Stack Overflow

How to render File object to HTML element (using Vue.js)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related