Nativescript - how to display image from documents directory? - imageview

Question

I'm building an app that's mostly intended for offline usage.
A user can download an image from the web, and I can see that uploaded image within the documents folder (fs.knownFolders.documents()) within my Nativescript app without problem.
I've spent the last few hours trying to display that downloaded image within my view, without success.
From what I understand (could be wrong) this is different than just specifying an image src of "~/myImage.jpg".
Although this isn't my exact application, this follows the same principles and give us some code to verify against.
main-page.js:
var observable = require("data/observable");
var imageSource = require("image-source");
var fs = require("file-system");
exports.pageLoaded = function() {
var viewModel = new observable.Observable();
http.getFile("https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").then(function (r) {
//the getFile downloads to the root documents path, shown below
var folder = fs.knownFolders.documents();
var path = fs.path.join(folder.path, "googlelogo_color_272x92dp.png");
var image = imageSource.fromFile(path);
//have also tried grabbing the image by id, and setting its src.
viewModel.set("image", image);
}, function (e) {
//// Argument (e) is Error!
});
viewModel.set("image", null);
page.bindingContext = viewModel;
}
and main-page.xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
<StackLayout>
<Image width="80" src="{{image}}" height="80" stretch="none" />
</StackLayout>
</Page>
For reference, I'm using tns javascript (not angular), and tns version 2.0.1. At this point in time, I'm only concerned about iOS.
Any help is greatly appreciated!

Answer 1

Try this:
1) Use http.getImage
2) Grab the Image view via it's ID
3) Set the imageSource to the response of getImage
4)Save file
http.getImage("https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png").then(function (r) {
var imgview = page.getViewById("id_of_image_view");
imgview.imageSource = r;
var saved = imgView.imageSource.saveToFile(path,'jpg');
}};