Use base64 encoded images

Thunkable X components can display images encoded in base64 format. To do this, enter the data in this format in the URL or file name input field, for example:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=

This allows you to use a string representation of the image instead of importing an image file into the project.

Some input fields on the Thunkable X properties panel do not work correctly with large text.

bug%20large%20text

4 Likes

I recommend that you have to create your own YouTube channel and start making videos about your exp.
If you already have one, please drop the link here.

Thanks for the suggestion. Unfortunately, I do not know English well enough to create training videos and prefer to give information in text form. Therefore, while I post information here and on my Russian-language site.

4 Likes

It does not need a professional English language, you can show what are you doing with a few English label to describe what you did.

I understood. It’s like Thunkable tutorials. This is interesting and obvious for users, but there is one problem - if the interface of the software environment changes, then you will have to redo all tutorials. Otherwise, the old interface or blocks will be misleading.

You can ask, why should I encode images in base64 format, if I can add many files to the project at once? Because in some cases it’s more convenient to work with base64 - you can quickly update a huge amount of images in the project and get additional information about them (width, height, color depth, type, etc., that you want to add using the script).

Below is a php script that displays in the browser window text in base64 format for all graphics files in the specified (“sourceimages”) directory.

<?
$DirPath="sourceimages\\";
$Dir=opendir($DirPath);
$list = array();

while ($File=readdir($Dir)):
	if (is_dir($File)==false)
		{
			$path = $DirPath.$File;
			$data = file_get_contents($path);
			$fileInfo = getimagesize($path);
			$base64 = 'data:'.$fileInfo["mime"].';base64,' . base64_encode($data);
			array_push($list,basename($File)."#".$fileInfo[0]."#".$fileInfo[1]."#".$base64);
		}
endwhile;
echo implode('#', $list);
?>

After that, you can copy the base64 text into a text block “base54List” and turn it into a list for further work, as shown below.

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

1 Like