How to show multiple images through one image component in thunkable using images directly from firebase



Hi i am trying to build an app in which i want to display multiple images (more than 100) with corresponding action buttons with each image i have done that by uploading images directly onto the thunkable servers but now i am trying to do the same by getting the images through firebase storage i need help with how to change the image with the click of the corresponding button in a single image component that i have used.
Can anyone help me with this i m confused


Hello @Urban

For this, You need an extension [ Firebase Storage ] and Web API key of your firebase DB, to upload the images/pictures ( must be in .jpg format ) and display them on your app.
So kindly follow these steps to setup your firebase DB.

Step 1 : Get the web API key of your firebase DB

Step 2 : Go to storage and copy the URL
Actually this URL is a bucket name. Copy the URL [ don’t copy gs:// ]

Step 3 : Change the default rules of the storage.
Here you need to change the rules according to this screenshot. Now Click On Publish.

Step 4 : Upload Images/Pictures
Note that all the images must be in jpg format and there title/name as, 1.jpg 2.jpg 3.jpg . . . etc as shown in the screenshot.

Here is the blocks Screenshot

Download Firebase Extension : com.mirxtremapps.FirebaseStorage.aix (34.6 KB)

Hope this solution will help you out!! :blush:
◎ Ct_tricks


Thank you so much for this your solution worked just fine i did exactly as u told but i am stuck at a point where images are changing automatically in the image component.
Now what i am actually trying to do in my app is that i have multiple buttons in my app so whenever you click on a particular button it shows an image assigned to that particular button for example i have 3 buttons first one is called APPLE second one is KIWI and the third one is MANGO so when someone clicks on APPLE i want the image of an apple to be shown and accordingly when KIWI is clicked the image should be changed to kiwi and so on…
And i am trying to display all these different images through a single image component and i am getting my images from my firebase storage.
So i have done exactly as u said and when i click on apple it gets the image from firebase and shows the image of an apple(named 1.jpg in firebase)but after 3 seconds the image automatically changes to kiwi which is named as 2.jpg in my firebase but strangely it does not change to mango which is name as 3.jpg it just stops there.
What i want is apple to be displayed when apple is clicked and kiwi when kiwi is clicked and so on
If u can help me with the blocks based on the above example i will be grateful



Hahaha :grinning: You didn’t mention this before, so i just provided you a random solution. I’m going to help you on your project but ,It’ll be easy for me to help you, if you show me some screen shots [ Of blocks and Design screen ] or share your AIA file.
kindly send any of these on [email protected]

◎ Ct_tricks


Yes sure i will send you the mail with my aia file in it thanks for your help


sorry for replying so late

Test (1).aia (40.6 KB)

here is the aia file of my project

now under fruits you have 2 selections 1st is 100cc and the 2nd is 125cc
under 100cc when i select apple it shows me the image of an apple but is automatically changing to the next image which is mango

what i want is apple to be displayed when apple is selected and mango when mango is selected

and this should happen with all the fruits which i have included in the app
can u help me with the blocks


(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)


(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)


(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)


Plz have a look.