How to display the base64-encoded image without internet?

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 ?

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,

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.

1 Like

I would probably use this script: [Solved] how do I base64 encode an image? - #2 by kartik14.

3 Likes

@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 ?

2 Likes

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

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

@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

Below is my iPhone

1 Like

Please use the button captioned Choose File to select your file
image

Let me know the outcome.

@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

Below is screen shot of Android

1 Like

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!

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