# Display image using url

**URL:** <https://community.thunkable.com/t/display-image-using-url/58172>\
**Category:** Questions about Thunkable X\
**Created:** [November 26, 2018, 6:21pm UTC](https://community.thunkable.com/t/display-image-using-url/58172 "2018-11-26T18:21:49Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisR](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@ChrisR](https://community.thunkable.com/u/ChrisR)\
**Post date:** [November 26, 2018, 6:21pm UTC](https://community.thunkable.com/t/display-image-using-url/58172/1 "2018-11-26T18:21:49Z")

</div>

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?

 ![Capture](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/9/b90b16f3ee44482628150dceb5604332bc76c9f4.jpeg)

---

<div class="post-metadata">

**Author:** ![Mark](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mark/32/18133_2.png) [@Mark](https://community.thunkable.com/u/Mark)\
**Post date:** [November 26, 2018, 6:35pm UTC](https://community.thunkable.com/t/display-image-using-url/58172/2 "2018-11-26T18:35:50Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Vivek\_Gopani](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@Vivek\_Gopani](https://community.thunkable.com/u/Vivek_Gopani)\
**Post date:** [November 27, 2018, 1:42am UTC](https://community.thunkable.com/t/display-image-using-url/58172/3 "2018-11-27T01:42:50Z")

</div>

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](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?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [November 27, 2018, 8:36am UTC](https://community.thunkable.com/t/display-image-using-url/58172/4 "2018-11-27T08:36:40Z")

</div>

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](https://lh3.googleusercontent.com/L8mam-nPPYZ2zFaavJQAvuD7anviO_SJzHsAJr-dhTrwXgeYwjLqbj7e703ZIsmzmwI4rRGGFpiUjdO2v5Oc=w1600-h778)

---

<div class="post-metadata">

**Author:** ![Vivek\_Gopani](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@Vivek\_Gopani](https://community.thunkable.com/u/Vivek_Gopani)\
**Post date:** [November 27, 2018, 10:20am UTC](https://community.thunkable.com/t/display-image-using-url/58172/5 "2018-11-27T10:20:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\
**Post date:** [November 27, 2018, 10:53am UTC](https://community.thunkable.com/t/display-image-using-url/58172/6 "2018-11-27T10:53:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mark](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mark/32/18133_2.png) [@Mark](https://community.thunkable.com/u/Mark)\
**Post date:** [November 27, 2018, 6:08pm UTC](https://community.thunkable.com/t/display-image-using-url/58172/7 "2018-11-27T18:08:09Z")

</div>

> [@Vivek\_Gopani](#):
>
> 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 :-  
> [Healthy.jpg - Google Drive](https://drive.google.com/open?id=1Rs3DfzMwfA-27dMUVD15KiOP2VmHD8GD)

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.

---

<div class="post-metadata">

**Author:** ![Vivek\_Gopani](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@Vivek\_Gopani](https://community.thunkable.com/u/Vivek_Gopani)\
**Post date:** [November 28, 2018, 1:45am UTC](https://community.thunkable.com/t/display-image-using-url/58172/8 "2018-11-28T01:45:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mark](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mark/32/18133_2.png) [@Mark](https://community.thunkable.com/u/Mark)\
**Post date:** [November 28, 2018, 5:21pm UTC](https://community.thunkable.com/t/display-image-using-url/58172/9 "2018-11-28T17:21:48Z")

</div>

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
```

---

<div class="post-metadata">

**Author:** ![Vivek\_Gopani](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@Vivek\_Gopani](https://community.thunkable.com/u/Vivek_Gopani)\
**Post date:** [November 29, 2018, 1:20am UTC](https://community.thunkable.com/t/display-image-using-url/58172/10 "2018-11-29T01:20:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 11:52am UTC](https://community.thunkable.com/t/display-image-using-url/58172/11 "2024-11-08T11:52:35Z")

</div>


