Open an Image from XML

Thread is closed for posting
8 posts, 2 answers
  1. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 21 Aug 2017 Link to this post

    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%" />

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 22 Aug 2017 Link to this post

    Hi Dimitar,

    You could use the path for the newly created image and to 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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 22 Aug 2017 in reply to Nikolay Tsonev Link to this post

    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"/>"

  4. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 22 Aug 2017 in reply to Dimitar Link to this post

    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%" />

  5. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 22 Aug 2017 Link to this post

    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);
    });

    }

  6. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 22 Aug 2017 Link to this post

    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 . 

  7. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 23 Aug 2017 Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  8. Dimitar
    Dimitar avatar
    66 posts
    Member since:
    May 2014

    Posted 23 Aug 2017 Link to this post

    ok, Thank you  .
Back to Top