Open an Image from XML

[Dimitar]

Hi , 

I am execute save an in image in document folder  ( let folder = fs.knownFolders.documents().path;).

and the file is saved in /image/data/user/0/org.nativescript.ChatCardF/files/test.png

But after that how I could open the saved file in xml .

What should be syntax to see the saved image from the document folder.

<Image src="test.png" height="200" width="100%" />

[Nikolay Tsonev]

Hi Dimitar,

You could use the path for the newly created image and set it to the Image source property. For example:
XML

<StackLayout class="p-20">
       <Label text="Image" class="h1 text-center"/>
       <Button text="TAP" tap="onTap" class="btn btn-primary btn-active"/>
      <Image width="70" height="70" src="{{imageSource}}" stretch="none" />

   </StackLayout>

TypeScript

var currentImagePath = documentsPath+"/" + "test.png"
    tmpObservable.set("imageSource", currentImagePath);

For your convenience, I am attaching also a sample project, where this scenario is demonstrated. 


Let me know if I could assist you further.

Regards,
nikolay.tsonev
Progress Telerik

[Dimitar]

But actually the strange thing is that I have recorder the image and when I am trying to show the image , it doesn shows, even using the whole path . 

" <Image src="image/data/user/0/org.nativescript.ChatCardF/files/test.png"
height="200" width="100%" class="mainblue"/>"

[Dimitar]

Actually don't want to display any image, even some external images 

<Image src="http://civilizedcavemancooking.com/wp-content/uploads/2015/01/Paleo-Chicken-Soup.jpg"
height="200" width="100%" />

[Dimitar]

Ok,  hI have found the reason but still not ok. 

So , I am selecting the folder for save and should be "/data/user/0/org.nativescript.ChatCardF/files/test.png"  ,

according to this, but actually when I am checking on a device . It is in the sdcard/Adnroid/data/org.nativescript.ChatCardF/files/NSIMG_20170822_2012441.jpg

 

var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: false };
camera.takePicture(options)
.then((imageAsset) => {

console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
let dt:Number = Date.now() ;
let source = new imageSource.ImageSource();
source.fromAsset(imageAsset).then((source) => {
let folder = fs.knownFolders.documents().path;

let fileName = "test.png" ;
let path = fs.path.join(folder , fileName);
console.log("Saved image BEFORE" + path);
let saved = source.saveToFile(path, "png");
if(saved){
console.log("Saved image" + path);
bcardItem.itemProfile_path = path ;
}
});
}).catch((err) => {
console.log("Error -> " + err.message);
});

}

[Dimitar]

Ok , finally I have found the solution in https://github.com/NativeScript/NativeScript/issues/4242 

but please update the documentation in https://docs.nativescript.org/cookbook/image-source ,

as mention in the post . 

[Nikolay Tsonev]

Hi Dimitar,

I am glad to hear that you have resolved your case.
Regarding your latest request, the update of the documentation is already made with PR #4265 as it is mentioned in the last comment of the issue.

Also, the change is uploaded in the public documentation and it could be found here.

Regards,
nikolay.tsonev
Progress Telerik

[Dimitar]

ok, Thank you  .