Cloudinary image from Google Sheets Not Showing in Thunkable

Hi,
I am new to Thunkable and have been following the how to create your first App Tutorial.

I added a DataViewer List with text and image and linked it to a Google Sheets data source which has Photo’s in the spreadsheet as a link to Cloudinary.

For some reason the images will not load from the Data source ?
The links are public so anyone can view them.
I only have a Free Account.

Any help on why the images wont load ?

Kind regards
Will

Welcome to Thunkable! It’s important to always provide a screenshot of your blocks or a link to your project. Otherwise, we have no way of knowing why something isn’t working.

Hi,

Thanks for your response.
The blocks are the standard Data Viewer List component

As below from the Thunkable Academy Tutorial

Can you provide an example image url?

Can you share a screenshot of the field mapping for the Data Viewer List (DVL)? When you click on the DVL, the properties panel will be displayed at the top-right of the screen with those field mappings.

Picture url below. Maybe I need to resize it or does DVL auto resize?

Url to picture

Data_Viewer_List1
Data Viewer List
Data source
View Data
Table
1
Title
Subtitle
Get Image property from column
Picture
Get Title property from column
Text
Get Subtitle property from column
Text
Left Swipe
Right Swipe
Empty text
Empty string
Layout
X
1
Y
95
W
325
H
533
Resize Mode
Interactive

Can you actually click on the Data_Viewer_List1 in the component tree at the top-left of the screen and then take a screenshot? Right now, you have the ScreenTheTeam selected instead so I can’t see the properties panel for the DVL.

The DVL should resize the image for you. The link you shared to an image in Cloudinary cannot be displayed in an Image component in Thunkable. Did you try that? That’s a good test to know whether your urls are valid or not.

I believe you used Cloudinary asset links that include a download handler. You need to use the Copy URL menu option in Cloudinary instead. Your urls should look like this: https://res.cloudinary.com/dfj2a8tbr/image/upload/v1686808597/cld-sample-5.jpg

But the one you posted above looks like this:

https://asset.cloudinary.com/dcu0onpna/2bf4fac756e4f2eeb9ce87d5d773428e

Here’s where Copy URL appears in the Share menu:

Hi
I pated the DVL properties after the screenshot

![image|349x500](upload://qxyqhfKXSqwBJnNBKm0I2f986vX.jpe


g)

Yes, I saw that but it didn’t include a screenshot of the source and field mappings. Having it in text form isn’t very helpful, unfortunately.

Did you fix the Cloudinary urls?

Not sure if I should open a new thread or just answer this one.
I am having a similar problem.
I’m trying to build a personal profile app, where people can sign-up and see each others profiles.
But can’t understand why the photo (a picture from the smartphone device) doesn’t work.
When I make a live test, the button “Selfie” works, it takes the picture, but then, when I click “ok” on the picture, the app just shutdown.
Follow print-screens of my project: (only 3 allowed)



What happens if you assign the url from uploaded file block to a label’s text? Does the app still crash? If not, what url is displayed? Is it a valid image url?

What happens if you right-click on the url from uploaded file block and click Show advanced block" and then assign the green errorblock to a label's text (preferably a *different* label)? What does it show for the error? You can do the same thing for thephoto from camera` block. What does it show for the error?

Not sure if I understood. Not sure if made it correctly.
I am very noobie to THUNKABLE and English is not my language.
But, there it is:

1 - “What happens if you assign the url from uploaded file block to a label’s text? Does the app still crash? If not, what url is displayed? Is it a valid image url?”

Answer: I created a new screen just for testing, put a label and set its text to the URL of the Cloudinary image.

Here is the result:

If You select the entire text (URL) and right click, it will drive you to correct image.

2 - “… What does it show for the error?”

Answer: I created 2 labels and seted them as invisible.
At the advanced block, I seted visibility to “true” and set the Texts to “error” and “URL” respectively.
The App still crashing after clicking on “ok” button to confimr the picture taken.

I’m developing this app just for learning.
If You wish, we can just give it up and restart from zero.
All I want is just to learn how to create a system with sign-up and sign-in screens.

I don’t know what I did, but it’s working now.
Thank You for you Help anyway.
After I made what You told me to do, use advanced blocks, it’s working.
I have no idea why and what is the connection, but it’s working.

1 Like