[Vuejs]-Bind base64 string to src image is not working with vue

by

4👍

✅

The this context is changed inside of reader.onload.

Just store this inside a temporary variable like this:

[...]
const that = this;
reader.onload = function( e ) {
    that.img = reader.result;
}
[...]

Example:

new Vue({

el: '#app',
data: {
  img: ''
},

methods: {
  upload: function( event ){
    let file = event.target.files[0];
				if( !file ) {
					return;
				} else {
					let imageType = /image.*/;
					if ( !file.type.match( imageType ) ) {
						return;	
					} else {
						let reader = new FileReader();

						const that = this;
						reader.onload = function( e ) {
							that.img = reader.result;
						}

						reader.readAsDataURL(file);
					}
				}
  }
}

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  
  <img :src="img" width="200" height="200" />
  <input type="file" @change="upload">
</div>
👤0BLU

Leave a comment