尝试设置变量时函数返回未定义

Question

我正在使用forEach为每个项目设置图像，但是该功能无法正常工作，我现在无法弄清楚。

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

因此console.log(reader.result);记录了正确的数据，但是从console.log(this.createImageFromBlob(data));起它是未定义的。

我将如何解决或解决此问题？