Image Angular2-在ngFor中异步加载二进制图像数据

我正在尝试使用node的fs模块加载一些图像。我让它在一个图像上工作，但在ngFor循环中，正确的方法是什么

目前我有：

<div *ngFor="let job of getJobs() | async">
   <img src={{readImageFile(job.thumbUrl)}}>
</div>

这不管用。。那么，在ngFor循环中异步加载数据的正确方法是什么

更新

我尝试了

readImageFile（url）| async

readImageFile: function(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(); 
}

---

这不是一个好办法<代码>readImageFile（job.thumbUrl）将在每次更改检测运行时调用，这是非常常见的

这应该行得通

<img [src]="readImageFile(job.thumbUrl) | async">

您好，谢谢您的回复，我尝试了您的第一个建议，但仍被反复呼叫。。知道为什么吗？

readImageFile（）

是否返回一个可观察的

？如果是，在第一个事件之后，observable是否完成？这是服务器上的readImageFile meteor方法。我怎样才能知道它是什么类型的以及它是否完成？thanksreadImageFile:function（url）{var Future=Npm.require（'fibers/Future'）；var myFuture=new Future（）；fs.readFile（字符串（url），function read（错误，结果）{if（错误）{myFuture.throw（错误）；}else{myFuture.return（新缓冲区（result.toString（'base64'）；}）；返回我的未来。等等（）；}，我终于成功了！这与您的第二种方法完全相同，但在map函数中，我必须在最后添加“returnjobs；”才能让它工作。非常感谢你的帮助！在我的例子中，我有两个作业，但readImageFile回调似乎记录到控制台三次。你知道为什么吗？这是否意味着我阅读图像的次数超过了必要的次数？
<img [src]="readImageFile(job.thumbUrl) | async">

getJobs() {
  this.jobs = /*code to get jobs*/.map(jobs => {
    this.images = new Array(jobs.length);
    jobs.forEach(item, idx => { 
      readImageFile(idx, item.thumbUrl);
    });
    return jobs;
  });
}

  readImageFile(idx, url) {
    if (url) {
      this.call('readImageFile', url, (err, res) => {
        if (err) {
          console.log(err);
        }
        else {
          console.log('read image file success');
          this.images[idx] = "data:image/jpg;base64," + res;
        }
      });
    }
  }

<div *ngFor="let job of jobs | async; let idx=index">
   <img [src]="images[idx]">
</div>