312
Views
12
Comments
Display image using Url as Photo
Application Type
Reactive

Hi Everyone,

i have a https link which is obtained using an excel uploaded sheet. I need to use the link to obtain the picture and display it as user picture for each of my Users.
I used the external url initially, but it is not displaying the data correctly. 
Could any one please help?
Uplaoding the .oml file for reference

TikiTakaPremierLeagueAuction.oml
UserImage.jpg
Neha Bhimsaria

Hello saif, 

I think this image URL link is not accessible so it is showing as broken image. 

Please make it publicly available.


Thanks 

Neha

2022-07-11 14-05-36
Jeroen Barnhoorn

Hi Saif,

Currently, you're using an Expression to display your photo URL. Expressions are meant to display text, not images. Instead, try using the Image widget, setting Type to 'External URL' and entering the URL you retrieve from the database in the URL field:

Also, like Neha already mentioned, make sure your images are publicly accessible.

Hope this helps.


2022-03-10 16-20-13
saif sheikh

Hi Neha, Henil & Jeroen, 
I was able to change the properties using external Url. But the image file is still not getting displayed. The image Url is accessible on the browser using the link so the image properties are set to public.
Uploading the latest .oml file for your reference.

TikiTakaPremierLeagueAuction q1.oml
2023-05-23 04-55-55
Wasimkhan Syed Abuthahir

Hi,

May I know what value you are passing in the URL?

Can you paste it here?

Adding on above comment.

I got the data. Let me check

Regards,

Wasimkhan S

2022-07-11 14-05-36
Jeroen Barnhoorn

Hi Saif,

I think that your URLs are, in fact, still not publicly available. When I try to access them in my browser, I get an 'Access Denied' message. Your images might be available to you, because you're logged into a Google account that has access, but that doesn't mean your OutSystems applications has access (as it doesn't have your Google account's credentials).

Also, when I download your .oml file and try to replace one of the URLs by the URL of an image that I know to be available (https://upload.wikimedia.org/wikipedia/commons/1/15/May-Irene_Aasen%2C_selvportrett_1984.jpg), it work fine: 

2022-03-10 16-20-13
saif sheikh



passing  in url - https://drive.google.com/open?id=1rvQLZLhwYm15HcWuENCCkd-zmLXZvvPF
i am also unable to open the image in incognito mode. The images are in google drive.. how can i make sure that the images are public  



TikiTakaSportsArena.oml
2019-01-07 16-04-16
Siya
 
MVP

Images are not displayed as they are not public. 

If you are the owner of the Google drive, change the share settings as "Anyone with the link" with Role "Viewer". If this is not an option you may have to use Google Drive REST API to interact with files. Please have a look at  Google Drive Connector Reactive Forge Component and Google Drive Integration in OutSystems - Youtube

2022-03-10 16-20-13
saif sheikh

Hi Siya,

Since, i am the owner of the google drive, i have tried with changing the drive properties from editor to viewer and vice versa with anyone can open this link.. but  that is not working..will try to work on it with the forge components you have mentioned, but i need to do it without the use of a forge component. kindly confirm an alternate solution.
Attaching oml for your reference

TikiTakaSportsArena.oml
2019-01-07 16-04-16
Siya
 
MVP

It seems that regardless of an image's being public , it isn't displaying within an OutSystems application. Not sure if this is an OutSystems issue (CSP settings) or Google drive is preventing embedding of images. 

However, there's a workaround available: you can utilize a website like https://www.labnol.org/embed/google/drive/ to convert your public Google Drive links into direct image links, which does work. Kindly note that the length is more you have adjust your entity field width for image field. 

eg: 

Original link:  https://drive.google.com/file/d/14mfZXQAMIRuXkjWLb8pR7ANxUoNOMRpg/view?usp=share_link does not work when embedded.

Converted : https://lh3.googleusercontent.com/drive-viewer/AKGpihZNQQXg6_K8MGMKGmNmBQpF7dpkLxbnUHz15Lqnq-e6aso0O8VVxpobzJORTr6e-p2CythUY-oz7sJ4mAwKTyRHPPpo5aKXjw=s2560 works when embedded

2022-03-10 16-20-13
saif sheikh

Hi Siya, 

Thank you for your effort. i tried to embed the link using the link you shared but i am getting a error that the image is not available.

2019-01-07 16-04-16
Siya
 
MVP

Please check if you are embedding  the correct url. The screenshot you shared shows the link starts with drive.google.com where as the link converted using lanbol.org is always lh3.googleusercontent.com. 

2023-05-23 04-55-55
Wasimkhan Syed Abuthahir

Hi,

The URL for Image is not public. I can see 403 error in chrome dev tool.

Regards,

Wasimkhan S

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.