Display image using url

I am trying to develop an app wherein i am suppose to display image output based on user input. I will change image output based by changing url. However when i try to run the app, image does not display from specified url. All I get is blank screen. Please refer attached snap of my blocks. Where am i going wrong?

@ChrisR, Can you verify that the url that you are using is an actual image url? For example, if you simply paste it into a browser does it display the image that you expect? If so, can you send us the image url for us to test?

Thanks in advance.

-Mark

I tried to open this link from different devices and its working perfectly fine. However, I am still unable to display image using this url :-
https://drive.google.com/open?id=1Rs3DfzMwfA-27dMUVD15KiOP2VmHD8GD.
In fact I even tried different urls but none of them are working in thunkable x. Am I messing with syntax of building blocks?

You do not see this image for the reason that you specify the wrong url of the image. To get the url of any image, right-click on it and select “copy link to image” (or something like that). The correct url is

https://lh3.googleusercontent.com/L8mam-nPPYZ2zFaavJQAvuD7anviO_SJzHsAJr-dhTrwXgeYwjLqbj7e703ZIsmzmwI4rRGGFpiUjdO2v5Oc=w1600-h778

I am storing images in google drive and generating sharable link from it. The link opens perfectly in other browsers as well. Is there any others way to generate link or need to modify any blocks?

I have your link open in WebViewer without problems on iOS.

Vivek, that link you show above isn’t a direct link to the image, it is actually a link to an HTML page which displays the image, along with a bunch of other stuff, like the file name, print and download buttons, zoom controls, etc. In order to get a direct image link which can be used as the Picture property of an Image component you need a slightly different form of the link, which looks like:

https://drive.google.com/uc?id=1Rs3DfzMwfA-27dMUVD15KiOP2VmHD8GD&export

Hope this helps.

-Mark

P.S. You can also use a similar link of the form:

https://drive.google.com/uc?id=1Rs3DfzMwfA-27dMUVD15KiOP2VmHD8GD&export=download.  

For the Image component they both work. In a browser, this latter link will download the image file to your computer.

Sorry @Mark for this silly question ,but how do I obtain that link. Right now I am selecting option of “get sharable link” from google drive and using that link.

Vivek, you can do it manually and just take the ‘id’ part of the sharable link and put it between

https://drive.google.com/uc?id=

and

&export
1 Like

Thanks a lot @Mark for solving my query. Kudos to team thunkable !!