Answers for "image onload vuejs"

1

vue input file image preview

// template
<div id="app">
  <input type="file" @change="onFileChange" />

  <img v-if="url" :src="url" />
</div>


// script
data() {
  return {
    url: null,
  }
},
methods: {
  onFileChange(e) {
    const file = e.target.files[0];
    this.url = URL.createObjectURL(file);
  }
}
Posted by: Guest on August-11-2021
0

render image in vue

<template>
  <div>
    <img :src="image"/>
  </div>
</template>
<script>
export default {
  mounted: function() {
    if (this.source) { //is it empty
      this.image = this.source //replace placeholder
    }
   this.loading = false
  },
  data () {
    return {
      image: somePlaceholderImage,//url for placeholder image
      loading: true
    }
  },
  props: ['source'],
}
</script>

<style>

</style>
Posted by: Guest on July-05-2021

Browse Popular Code Answers by Language