Loading multiple images with base64 renders the same image

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:

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) {
			    .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                                  

			    .catch(function(error) {
			    	console.log('Error occured: ' + error);

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



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 Color="White" Margin="15,0" Padding="10">
		<Text FontSize="26" Value="{content}" Color="#444" Alignment="Center" TextAlignment="Center" TextWrapping="Wrap" />

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

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.

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.

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.

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