Hi, I’m building a wardrobe app and I’m having trouble displaying images across screens.
On my “Add Item” screen, users upload a photo from their gallery or take a picture using the camera. I want those images to show on my “Wardrobe” screen when they click “Add to Wardrobe,” and I want multiple images to appear (not just one).
Right now, I’m using a stored variable to save the image, but when I go to the next screen, the same image shows for all items in the wardrobe.
How do I make it so that when I click “Add to Wardrobe” on my Add Item screen, the selected image appears correctly on my Wardrobe screen?
I also want this to work multiple times so I can keep adding different images to my wardrobe.
Caveat, I have a lot more experience with the record and playback sound features than with taking and storing photos, but this feels very similar to something I ran into there.
What I suspect is happening is that when you save the photo to a stored variable, Thunkable is actually saving a file path or URL from cache, not the image itself.
I can’t test right now, but if you try displaying that same stored variable in a label instead of an image component, you’ll probably see something like “/cache/image.png”. That means it’s just pointing to the most recent photo. When you take a new one, it overwrites the old path, and if you close the app, it can disappear completely.
That would explain why all your wardrobe items show the same image.
If that’s the case, the reliable way to fix it is to upload each image to a backend like Firebase or Cloudinary. Once the image is hosted, you get a permanent URL, which you can save to a stored variable, and each item can display its own image properly.
Hello, I was able to make multiple images show up on the wardrobe page, using a data lister viewer and Cloudinary. However, when I click generate outfit, the photos shown on the outfit screen are all the same images. This is the coding in the add item screen:
You’re pulling from the same Row ID each time, so all three images end up identical.
Right now every “get value” is using that one app variable RowID1. That means it keeps grabbing the same row over and over.
What you want to do instead is store a different Row ID for each item when you create it. When you add a row, take the green “row id” output and save it to its own variable or list. Then on the outfit screen, use a different Row ID for each image slot.
So basically:
save each new row’s Row ID separately
don’t reuse the same variable for all three images
pass or store multiple IDs, then load each one individually
Once each image is tied to a different Row ID, they’ll show up correctly.
Would you be able to show me exactly how to set it up step by step (maybe with a quick example or screenshot)? I just want to make sure I’m doing it correctly and not missing anything. This is my current app variable RowID1:
