trying to store image as base64 and using it

Question

I have a block of code that I found online and it seems to be working and not working at the same time. I think its probably my lack of understanding but I cant seem to get it to work the way I want it.

selectPicture() {               
                let context = imagepicker.create({
                    mode: "single" // use "multiple" for multiple selection
                });
                var imageBase64
                context
                .authorize()
                .then(function() {
                    return context.present();
                })
                .then(function(selection) {
                    selection.forEach(function(selected) {
                        imageSourceModule.fromAsset(selected).then((imageSource) => {
                            
                            imageBase64 = imageSource.toBase64String("jpg",60);
                            console.log("Image saved successfully!")
                            console.log(imageBase64)
                            console.log("test test") //runs fine
                            this.image = "~/assets/images/account/camera.png" //cant seem to run
                            console.log("test test 2")
                        }).catch(function (e) {
                            // process error
                            console.log("got error 1")
                        });
                    })
                }).catch(function (e) {
                    // process error
                    console.log("got error 2")
                });

            },

Within the imageSourceModule.fromAsset(selected).then((imageSource), I was trying to save the base64 info in another variable but cant seem to do anything within other than console log a string. When I run this.image = "~/assets/images/account/camera.png" (just a placeholder, even calling a method does not work too) for example it catches an error.

What could the problem be? thank you!

UPDATE

I changed console.log("got error 1") to log the actual update and what i got was:

undefined is not an object (evaluating 'this.image = "~/assets/images/account/camera.png"')*

I now think that theres a problem with my understanding calling variable outside. My variable 'image' is within the script at

data() {
            return {
                image : ""
            }
        }

Answer 1

first of all check what this variable is, because you do not use es6 arrow functions, so this is probably not the vue instance. the second thing: when you change vue-variables asynchronously use the $set method, like: this.$set(this, 'image', '~/assets/images/account/camera.png')