Angular2 - Load binary image data asynchronously inside ngFor - image

Question

I'm trying to load some images using node's fs module. I have it working on a single image but what is the correct way to do this inside an ngFor loop?
Currently I have:
<div *ngFor="let job of getJobs() | async">
<img src={{readImageFile(job.thumbUrl)}}>
</div>
getJobs() returns an observable from my service.
readImageFile() calls a Meteor server-side method which loads the image data using fs and returns it asynchronously:
readImageFile(url) {
if (url) {
this.call('readImageFile', url, function(err, res) {
if (err) {
console.log(err);
}
else {
console.log('read image file success');
return "data:image/jpg;base64," + res;
}
});
}
}
This doesn't work.. So what is the correct method for asynchronously loading data inside an ngFor loop?
update
I tried with 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();
}

Answer 1

This is not a good approach. readImageFile(job.thumbUrl) will be called with each change detection run which is quite often.
This should work
<img [src]="readImageFile(job.thumbUrl) | async">
The | async pipe should prevent change detection calling readImageFile() repeatedly.
Another approach would be to fill an array and bind to this array instead
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>