# Kindly help me with a getImageFromBase64(base64) workink example

**URL:** <https://forums.fusetools.com/t/kindly-help-me-with-a-getimagefrombase64-base64-workink-example/4435>\
**Category:** How-to Discussions\
**Created:** [August 23, 2016, 2:17pm UTC](https://forums.fusetools.com/t/kindly-help-me-with-a-getimagefrombase64-base64-workink-example/4435 "2016-08-23T14:17:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [August 23, 2016, 2:17pm UTC](https://forums.fusetools.com/t/kindly-help-me-with-a-getimagefrombase64-base64-workink-example/4435/1 "2016-08-23T14:17:21Z")

</div>

I’m a Fuse really really absolute beginner and I have basic knowledge of Javascript too, but I really want to make an app with Fuse and I’m doing all my best to learn.

I would like to display (list) some JSON data. I used as code the example in the “Fetching and displaying data” video tutorial. The problem I’m trying to solve is that my JSON data has `Base64 encoded images` that I would like to display but I don’t understand how to use `getImageFromBase64(base64)`.

The `Base64` string is saved in the `imageencoded` JSON key and it has the prefix string `data:image/png;base64,` or `data:image/jpg;base64,`.

This is my `.unoproj` file:

```auto
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.ImageTools" 
  ],
  "Includes": [
    "*"
  ]
}

```

And this is the code:

```auto
<App>
    <DockPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");
            var Image = require("FuseJS/ImageTools");
 
            var imageencoded = Observable();
            var title = Observable();
            var errorMessage = Observable("");

            fetch("http://www.triestenascosta.it/data.json")
                .then(function(result) {
                    if(result.status !== 200){
                        errorMessage.value = "Error " + result.status;
                            return;
                        }
                        result.json().then(function(data){						
                            for(var i = 0; i < 10; i++){
                                var item = data[i];
                                title.add(item);
                                imageencoded.add(item);
                            }
                       });
                 }).catch(function(error) {
                     errorMessage.value ="Oh no!";
                 });
             module.exports={
                  title: title,
                  imageencoded: imageencoded,
                  errorMessage: errorMessage
             };
        </JavaScript>
        <StatusBarBackground DockPanel.Dock="Top" />
        <Text TextColor="#a94442" Value="{errorMessage}" Alignment="Center" />
        <ScrollView ClipToBounds="true">
            <StackPanel>
                <Each Items="{title}">
                     <DockPanel Margin="0, 0, 0, 10">

                         <Text Value="{title}" TextWrapping="Wrap" Alignment="CenterLeft" Margin="10" />
                     </DockPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

```

Would you kindly add the `getImageFromBase64(base64)` part of code so that I understand how it works and how Javascript promises work?

I did add something like this `var Image = require("FuseJS/ImageTools");` but after this I really don’t know how to continue.

P.S. The example of the video tutorial works perfectly in local preview, but it does not on my Samsung S3 Mini (Android 4.4), nor on my Huawei Honor 7 (Android 6) as the image placeholders are not displayed. Locally the preview correctly shows the square image placeholders and the list of strings, but on the devices only the list of strings is shown.

Many thanks

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [August 24, 2016, 9:28am UTC](https://forums.fusetools.com/t/kindly-help-me-with-a-getimagefrombase64-base64-workink-example/4435/2 "2016-08-24T09:28:40Z")

</div>

Hey Enrico, the imagetools api needs a doc update with examples for sure.

In short though, here’s how you use it:

```auto
var ImageTools = require('FuseJS/ImageTools');
ImageTools.getImageFromBase64(myBase64ImageString).then( function(image) {
  // If the b64 was valid, the image object you get here will contain a path you can use to display 
  myDisplayFunc(image.path);
});

```

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [August 25, 2016, 7:10am UTC](https://forums.fusetools.com/t/kindly-help-me-with-a-getimagefrombase64-base64-workink-example/4435/3 "2016-08-25T07:10:11Z")

</div>

Hi Andreas and thank you for replying.

As said I’m an absolute beginner so I’m asking your help a little more. There are a number of things I don’t understand.

- I don’t understand **where** should I add your code. I added in the FOR - LOOP (see my code above) is this correct?

```auto
						for (var i = 0; i < 10; i++){
							var item = data[i];

							title.add(item);

							ImageTools.getImageFromBase64(imageencoded.add(item)).then(function(image) {
								var img = image.path;
							});
							
						}

```

I used `imageencoded.add(item)` as the variable that has the base64 string (because `imageencoded` is the json key that has the base64 value).

- I don’t understand **what** is the `image.path`you mention for. Why do I need a `path` when I have a base64 string?
- You use a `myDisplayFunc(image.path)` function that I absolutely don’t know how to code it so I used the one made by Anders found _[here](https://www.fusetools.com/community/forums/howto_discussions/base_64_images?page=1&highlight=c9a503d5-3896-41bb-9814-b6bdc8e5fe22#post-c9a503d5-3896-41bb-9814-b6bdc8e5fe22)_. Can I use this code for my job? I created a new file such as `base64.uno` and then _Included_ in the `.unoproj` file as follows:

```auto
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.ImageTools",
    "Uno.Geometry",
    "Experimental.TextureLoader" 
  ],
  "Includes": [
    "*",
    "base64.uno"
  ]
}

```

I added also `"Uno.Geometry"` and `"Experimental.TextureLoader"` as written by Anders.

Then I changed `MainView.ux` as follows:

```auto
					<DockPanel Margin="0, 0, 0, 10">
						<Image>
					        <Base64ImageSource Base64="{imageString}" />
					    </Image>
						<Text Value="{title}" TextWrapping="Wrap" Alignment="CenterLeft" Margin="10" />
					</DockPanel>

```

**But - of course - nothing works!** I know there are a lot of mistakes. Would you kindly help me to fix them?

---

<div class="post-metadata">

**Author:** ![Anders\_Bondehagen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_bondehagen/32/98_2.png) [@Anders\_Bondehagen](https://forums.fusetools.com/u/Anders_Bondehagen)\
**Post date:** [August 25, 2016, 10:53am UTC](https://forums.fusetools.com/t/kindly-help-me-with-a-getimagefrombase64-base64-workink-example/4435/4 "2016-08-25T10:53:44Z")

</div>

I just tested and it might be a bug in the implementation. I will get back to you.