Loading multiple images with base64 renders the same image

Bug Reports
1

Hello guys,

I have a server that has a list of feeds that each contain a title, text content and an image in base64 string format that it serves via JSON. When I fetch the data all goes well. I fetch the data and convert the base64 images using the ImageTools module, as in the code excerpt that follows:

2

function loadPosts(postType) {
fetch(‘http://leselihub.com/json/’ + postType)
.then(function(response) { return response.json(); })
.then(function(responseObject) {
data.value = responseObject;

    	data.value.feeds.forEach(function(feed, index) {
		    ImageTools.getImageFromBase64(feed.picture)
			    .then(function(image) {
			        var post = {};
                                    
                                    post.title = feed.title;
                                    post.content = feed.content;
			        post.image_data = image.path;
                                   
                                   // for debugging purposes I used an array to store the converted images                                  
                                   convertedImages.push(image.path);

			        posts.value.push(post);
			    })
			    .catch(function(error) {
			    	console.log('Error occured: ' + error);
			    });
		});

                    console.log('!!!THE CONVERTED IMAGES ARE' + JSON.stringify(convertedImages) + '!!!')
		dataSource.value = {'feeds': posts};
    });

}

loadPosts(‘interviews’);

module.exports = {
dataSource: feeds
}

The UX markup looks like this:

<StackPanel ux:Class="BlogPost">
	<Panel Color="White" Margin="15,0" Padding="10">
		<Text FontSize="26" Value="{title}" Color="#444" Alignment="Center" TextAlignment="Center" TextWrapping="Wrap" />
	</Panel>

	<Panel Color="White" Margin="15,0" Padding="10">
		<Text FontSize="26" Value="{content}" Color="#444" Alignment="Center" TextAlignment="Center" TextWrapping="Wrap" />
	</Panel>

	<Panel Color="White">
		<Image File="{image_data}" StretchMode="Fill">
			<DropShadow Size="20" Distance="23" Spread="0.005" Angle="90" Color="#0003" />
		</Image>
	</Panel>
	
	<DropShadow Size="20" Distance="23" Spread="0.005" Angle="90" Color="#0003" />
</StackPanel>
<!-- END DECLARE BLOGPOST -->

When I compile and run the code as an Android app all goes well except for the small hitch where some pictures are duplicated. I am going to attach screenshots and the log output.

3
4

For test purposes I loaded 3 different images from the server and two of them displayed the same despite them have different base64 image data. Sometimes all three of them display the same image I was thinking because ImageTools uses asynchronous methods (for instance the one in use ImageTools.getImageFromBase64(feed.picture).then(function(image) {…) running them in a foreach loop causes some data to override and duplicate. Could there be a way to load them synchronously/sequentially? Or could there be something I am missing or doing incorrectly?

I checked out the log data and it seems the getImageFromBase64 function stores the same image temporarily on looping again (on line 222), despite it having been converted from a different base64 image string.

5

Thanks for the bug report. :slight_smile:

As you can see the images converted from Base-64 gets saved to a temporary location. Unfortunately the filenames are generated from timestamps with second resolution, which means that images overwrites each other if more than one is loaded within one second.

I will create a ticket for this bug, and a fix will be available in a future release.

As for now there’s actually one possible workaround for this while using the latest preview build of 0.30.0. By using a new method called Base64.decodeBuffer to decode the base64 string to an ArrayBuffer, you can then use FileSystem.writeBufferToFile to write the returned buffer to a file.

Preview builds can be found here.

6

Downloaded it!! Works like a Charm!!! Thank you so much!!!