bind base64 string to src image is not working with vue

Question

I´m trying to bind base64 data to src of img property. The code works fine until set the new value to the img vue property

I build this

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();

						reader.onload = function( e ) {
							this.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>

Is not working, the base64 is set OK, but is not rendered to the image.

What is wrong with my code?

0BLU · Accepted Answer · 2019-05-23 18:46:40Z

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>

answered May 23, 2019 at 18:46

0BLU

74810 silver badges18 bronze badges

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

1 Comment

Alberto Siurob Over a year ago

awesome sensei. It works too as reader.onload = () => { ... } and is not neccesary to create the const. Awesome orientation bro tnx

Collectives™ on Stack Overflow

bind base64 string to src image is not working with vue

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