Function returning undefined when trying to set a variable

Question

I'm using a forEach to set images to each item, but the function doesn't work right and I can't figure it out right now.

ngOnInit() {
    this.workerId = parseInt(window.location.pathname.split('/')[2], 10);
    if (this.competences.length > 0) {
      this.filter.competences = this.competences;
    }
    this.mechanismService.getMechanisms(this.filter).subscribe(
      data => {
        this.allMechanisms = data;
        this.allMechanisms.forEach(mech => {
          mech.pictureSource = this.getImageFromService(mech.picture.id);
        });
        console.log(this.allMechanisms);
      }
    );
  }

getImageFromService(fileId) {
    this.userService.getProfilePicture(fileId).subscribe(data => {
      console.log(this.createImageFromBlob(data));
      return this.createImageFromBlob(data);
    }, error => {
      console.log(error);
    });
  }

createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      console.log(reader.result);
      return reader.result;
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }

So the console.log(reader.result); logs the right data, but from console.log(this.createImageFromBlob(data)); it's undefined.

How would I fix or work around this?