# Use base64 encoded images

**URL:** https://community.thunkable.com/t/use-base64-encoded-images/35254
**Category:** Questions about Thunkable X
**Created:** [July 11, 2018, 9:51am UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254 "2018-07-11T09:51:22Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [July 11, 2018, 9:51am UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/1 "2018-07-11T09:51:22Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/f/ef31ffa98ab29ef46a3795285ce9ad54828c1e1c.png)

---

<div class="post-metadata">

### Author: ![Hayder](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hayder/32/153829_2.png) [@Hayder](https://community.thunkable.com/u/Hayder)
#### Post date: [July 11, 2018, 10:09am UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/2 "2018-07-11T10:09:26Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [July 11, 2018, 11:10am UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/3 "2018-07-11T11:10:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Hayder](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hayder/32/153829_2.png) [@Hayder](https://community.thunkable.com/u/Hayder)
#### Post date: [July 11, 2018, 12:02pm UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/4 "2018-07-11T12:02:45Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [July 11, 2018, 12:14pm UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/5 "2018-07-11T12:14:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [July 17, 2018, 1:57pm UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/6 "2018-07-17T13:57:52Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/7/37428a1841862735f1e3a6f2a3194d640a9e7273.png)

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 12:01pm UTC](https://community.thunkable.com/t/use-base64-encoded-images/35254/7 "2024-11-08T12:01:12Z")

</div>