Angular-meteor app online and offline inconsistent image using gridFS

#1

I am working on Meteor/AngularJs app(meteor version 1.6 and angular version 1.6) where I have two collections, first collection is ‘userWork’ and second collection is ‘images’. For images, I am using collectionFS package and gridFS storage adapter. I am passing userWork reference (i.e WOUID) into images collection as shown in below code. I need this to work for both offline and online images.

code of cfs.images.filerecord collection

{ 
    "_id" : "", 
    "original" : {}, 
    "WOUID" : "dfIFS",
    "uploadedAt" : ISODate(""), 
    "copies" : {
        "original" : {}, 
        "thumbnail" : {}
    }
}

code of userWork collection

{ 
    "_id" : ObjectId(""), 
    "woNum" : NumberInt(1234), 
    "createdOn" : ISODate(""), 
    "WOUID" : "dfIFS", 
    "userID" : ""

}

On client side to list the user work, I am getting list of documents from userWork collection and the images of respective work from images collection according to WOUID. I am calling a function to list the images of each user work. I am using below code to show image for each work in list.

client/modules/userwork/views/worklist.html

<ion-list>
    <ion-item ng-repeat="ord in orders track by ord._id" >
    	<img ng-src="{{getImgSrc(ord)}}">	
    </ion-item>
</ion-list>

code of getImgSrc function is

client/modules/userwork/controllers/userWorkCtrl.js

$scope.getImgSrc = function(wo){
    
        var fetchWOImages = Images.findOne(
            {
                "$and":[
                {
                    WOUID:{$exists:true}
                }
                ,{
                    WOUID:wo.WOUID
                }
                ]  
            }
        );

	return $rootScope.serverUrl+"/cfs/files/images/"+fetchWOImages.getFileRecord()._id+"?store=thumbnail";
	
};

I am getting inconsistent images sometimes while changing screens between work list, individual work & dashboard and sometimes no images are being shown, for which we have to wait for a long time.

I am thinking that the issue might be due to Images.find() query in getImgSrc function on client side (as given above).

I will be happy to work for any other alternative ways instead of using collectionFS for my images issue but it should be reactive so that it can work on both online and offline.

Thanks for your efforts and help.