# How to display the base64-encoded image without internet?

**URL:** <https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818>\
**Category:** Questions about Thunkable X\
**Created:** [April 14, 2023, 4:23pm UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818 "2023-04-14T16:23:49Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamjureetree](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jamjureetree](https://community.thunkable.com/u/jamjureetree)\
**Post date:** [April 14, 2023, 4:23pm UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/1 "2023-04-14T16:23:49Z")

</div>

I am making a chat app, when user add a new friend, both sides exchange their image URL (of Cloudinary) through firebase. Problem is when the user have many friends the app has to download many images from Cloudinary when the app is opened, so the images cannot display immediately, plus when the user use the app offline (to read old messages) the images cannot display.

So I think I will convert image to base64 format by some web API and store in the device, but how to display image which is stored in base64 format without internet ?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 15, 2023, 4:04am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/2 "2023-04-15T04:04:13Z")

</div>

If you’ve encoded an image in base64 then you can just assign the encoded string to an image component and it will display it. Your base64 string should start with something like **data:image/jpeg;base64,**

---

<div class="post-metadata">

**Author:** ![jamjureetree](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jamjureetree](https://community.thunkable.com/u/jamjureetree)\
**Post date:** [April 15, 2023, 10:41am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/3 "2023-04-15T10:41:01Z")

</div>

Thank you very much for your kind @tatiang  
You solved my question.

May I ask more for the next step in this post ?  
Which web API can convert image URL (Cloudinary) to base64 ?

I have read many posts about it and tried the web API demo from @muneer and @actech but seem like all the web API were expired. They don’t give any response.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/9/d97b93f1b5462ddfc378972e667d5fce6cd772db.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/2/32a6bbb381e0a5a10f1b3b56cdf115cb58e5742a.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 15, 2023, 4:19pm UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/4 "2023-04-15T16:19:14Z")

</div>

I would probably use this script: [[Solved] how do I base64 encode an image? - #2 by kartik14](https://community.thunkable.com/t/solved-how-do-i-base64-encode-an-image/1858457/2).

---

<div class="post-metadata">

**Author:** ![jamjureetree](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jamjureetree](https://community.thunkable.com/u/jamjureetree)\
**Post date:** [April 17, 2023, 2:42pm UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/5 "2023-04-17T14:42:22Z")

</div>

@tatiang Thank you very much for your suggestion, however this script is for encoding a text to base64, not an image URL to base64, right ?  
I don’t know coding, so I cannot modify the script.

Could you or anybody please kindly help me about this ?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 19, 2023, 8:35pm UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/6 "2023-04-19T20:35:15Z")

</div>

> [@jamjureetree](#):
>
> Could you or anybody please kindly help me about this ?

I made a sample project to show how to retrieve an image as Base64. Was that not enough?

[https://x.thunkable.com/projectPage/61f68431c3761001dba12df1](https://x.thunkable.com/projectPage/61f68431c3761001dba12df1)  
You need to run the project from your mobile not from the computer.

---

<div class="post-metadata">

**Author:** ![jamjureetree](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jamjureetree](https://community.thunkable.com/u/jamjureetree)\
**Post date:** [April 21, 2023, 2:21am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/7 "2023-04-21T02:21:38Z")

</div>

@muneer I tried already your demo by my mobile phones, it does not show the result. After I put image URL in the Text Input box and click the Get Base64 button, It shows error message in Label 1, please see below the screen shot of my phones.

Below is my Android phone.  
 ![Android Result](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/6/1636ab0b93537cbf5ad27b9b8190d619fe10a91c.png)

Below is my iPhone

 ![iPhone Result](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/53d9547c91fbe3053185ebb12a317e9f9c23af6e.jpeg)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 21, 2023, 11:15am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/8 "2023-04-21T11:15:20Z")

</div>

Please use the button captioned **Choose File** to select your file  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/e/0e4813d1950d4d2300acfb29c0dacde8c3d8c58d.png)

Let me know the outcome.

---

<div class="post-metadata">

**Author:** ![jamjureetree](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@jamjureetree](https://community.thunkable.com/u/jamjureetree)\
**Post date:** [April 24, 2023, 2:04am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/9 "2023-04-24T02:04:33Z")

</div>

@muneer I tried the Choose File button with 3 mobile phones, 1 is iPhone, 2 are Android phones.  
Found result as below

1. After click the Choose File button, The iPhone ask me to choose from where to get the image; Take Photo, or Photo Library, or Search. While 2 Android phones do not ask, it go straight to Photo Library.

2. The iPhone can show Base64 text and Photo. However 2 Android phones cannot display them.

3. I tried the testing with png and jpg, both type of file give the same result.

Below is screen shot of iPhone

 ![iPhone Result of ChooseFile](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/6/264b5d619a863d8a0c0644b5702bca8ad1fd1467.jpeg)

Below is screen shot of Android

 ![Android Result of ChooseFile](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/0/70a2805ffe8098c0a74bf9dd58f404930614a40d.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [April 24, 2023, 8:22am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/10 "2023-04-24T08:22:16Z")

</div>

Great results.  
I created this to be a proof of concept and did not do a lot of checking, not even a progress bar. If you chose a large image file it will take time to upload it. for old phones this may take a lot longer to the point you might think it is stuck or not working.

Please select small image files such as icons which will allow old phones with low memory to give the expected results.

Apart for that, you have it working and now you can enhance the script to make it even better and faster.

Happy Thunking!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [July 23, 2023, 8:22am UTC](https://community.thunkable.com/t/how-to-display-the-base64-encoded-image-without-internet/2372818/11 "2023-07-23T08:22:46Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
