Retrieve binary image data from observable in ngFor

1

I need to load some images/videos from a local server so i’m using node fs to do this. It’s sort of working but the image seems to be being loaded repeatedly, instead of just loading it once when the page loads.

Here’s my component template:

<div *ngFor="let job of getJobs() | async">
   <img src={{getImage(job.thumbUrl)}} onerror="this.src='/img/default.jpg'">
</div>

and my component.ts:

  getImage(url) {
    console.log('get image from ' + url);

    var imageData = this.readImageFile(url);

    console.log(imageData);
    
    return imageData;
  }

  readImageFile(url) {
    if (url) {
      this.call('readImageFile', url, function(err, res) {
        if (err) {
          console.log(err);
        }
        else {
          console.log('read image file success');
          return res;
        }
      });
    }
  }

inside my job service (which is loading the jobs as an observable:

  constructor() {
    this.jobs = Jobs.find({});
    MeteorObservable.subscribe("jobs").subscribe();
  }

  public getJobs() : Observable<Job[]> {
    return this.jobs;
  }

and finally my meteor method:

    readImageFile: function(url) {
      console.log('read file from: ' + url);

      var Future = Npm.require('fibers/future');
      var myFuture = new Future();

      fs.readFile(String(url), function read(error, result) {
        if(error){
          myFuture.throw(error);
        }else{
          myFuture.return(new Buffer(result).toString('base64'));
        }
      });

      return myFuture.wait();
    },
2

Anybody…??