Passing values to property LWC

Question

I'm trying to pass a value after checking that the URL coming from the connectedCallback is valid. When I try to pass the value to the this.frontImage property I'm facing an issue, nothing really happens. Can get and alert to print the value either is the value passed to the property ending with an empty URL. There is a way to find out what is going on here? The alerts that you can see on this fragment of the code are printing out correctly but all goes dark if I try to reference to a property using 'this' keyword. Any idea how to solve this?

@track frontImage;
    
apexGetAssetData({
            recordId: this.recordId
          })
              .then(result => {
                if (result['error']) {
                  fireToast(this, 'error', 'Error', result['message']);
                } else {
                  alert('starts');
                  this.assetName = result['assetName'];
                  this.checkImageExists(result['frontImage'], function (existsImage) {
                    if (existsImage === true) {
                      // image exist
                      alert('image exist');
                      alert('result front image: ' + result['frontImage']);
                      this.frontImage = result['frontImage']; <-- This is not working.
                      alert('this.frontImage: ' + frontImage);
                    } else {
                      // image not exist
                      alert('image does not exist');
                    }
                  });
                  alert('let frontImage: ' + frontImage); <--- this give undefined
              })
              .catch(error => {
                console.log('Something went wrong' + 'Error: ' + error.message);
              })
              .finally(() => {
                this.showSpinner = false;
              })
        } else {
          fireToast(this, 'error', 'Error',
              'Error when processing images.Please contact your administrator');
        }
      }
    
      checkImageExists(imageUrl, callBack) {
        let imageData = new Image();
        imageData.onload = function () {
          callBack(true);
        };
        imageData.onerror = function () {
          callBack(false);
        };
        imageData.src = imageUrl;
      }

Answer 1

this.checkImageExists(result['frontImage'], function (existsImage) {

This causes this to become the function scope. Stick with the arrow notation:

this.checkImageExists(result.data.frontImage, (existsImage) => {

Answer 2

Your code is working. You're getting tripped up by asynchronous callbacks.

The code executes in this order:

              // 1
              this.checkImageExists(result['frontImage'], function (existsImage) {
                  // 3
                  this.frontImage = result['frontImage'];
              });

              // 2
              alert('let frontImage: ' + frontImage);

Your callback executes long after your top level code finishes executing. Javascript doesn't execute top to bottom when there are asynchronous callbacks involved. Callbacks execute much later.

I'd also suggest using console.log() to debug your code instead of alert, as console commands don't block code execution.