Display image from SQL Server On Premise Connection in PowerApps App

[agigliotti]

When I create an app from my data, which is a SQL Server on Premise Connection, choose a table that contains a field with a varbinary(max) data type, which contains photos, it will not display in the app I create when I insert an image and use "ThisItem.ppt_photo" as the function, ie. "image = ThisItem.ppt_photo.  It is just blank.  I know the photo is valid, because I can get it to display if I use the same field and table as a source in SSRS (SQL Server Reporting Services).  Is this functionality not supported, or am I doing something wrong? I am very new to PowerApps. Below is the screenshot of the powerapps design page where I am attempting this.

   

[v-yamao-msft]

Hi Agigliotti,

Per my knowledge, PowerApps is not able to parse Varbinary, so in your SQL Server On-Premise database, you could use image’s path instead of using a Varbinary to store your picture.

I have tried it on my side and it works fine. Please have a try on your side and let me know if it also works for you.

Best regards,
Mabel Mao

[Yakimo]

Hi  v-yamao-msft

How the specify the path? Shall the path be relative to sql server?

I have my database on SRV-SQL01 server, and a table in my database, where I put the path lin a column [Name] ike that: C:\08036.JPG

But my app doesn't show the image. I tried also with sql Image-type column, wihich has an image in, but no success.

Any sugestion how to display image in an app? It doesn't work from Sharepoint list, neither from SQL Server table

Thanks,

Yakimo

[v-yamao-msft]

Hi Yakimo,

There is a blog about uploading and storing image path to SQL database, please check this link for a reference:
http://geekswithblogs.net/dotNETvinz/archive/2009/08/02/uploading-and-storing-image-path-todatabase-...

Per my test, Image Path is working fine and the pictures can be shown on the app. What I did was to add a connection to the data base, then add a gallery and set its items property as the table name. Then in the gallery, add an Image control, the image will be shown.
I also tried with Image column type, but it didn’t work.

If you are trying to use SharePoint list, how do you get the images?

As in the SharePoint list Image column, an URL of the image is needed. You could get the Image from Internet. Or you could also save your images to OneDrive for Business, then get the Image URL from OneDrive for Business.

Say I have a SharePoint list with Image column type. I get an image URL from the Internet and enter it to the Address field.

The URL I am using is e.g. https://organicthemes.com/demo/profile/files/2012/12/profile_img.png
Then create an app based on this list, the image can be shown on my app.

Hope it can be a reference for you. Please feel free reply if you need more help.

Best regards,
Mabel Mao

[Yakimo]

Hi Mabel Mao

Thanks for your answer.

When I mean Image from SQL server or from SharePoint, I mean the image that I am in control of, not publicly accessed images.

Mine observations are the following:

(1) using SharePoint List with image/link column works only if the link column contains link to a public web address, like text "https://diviceimage.azureedge.net/devices/Acer/TravelMateB.png"

If the link is to my OneDrive located file/folder and the folder and even the image file is shared with everyone - the picture is only shown in designer. Later - iPhone/iPad does not show the image. I think I read somewhere in the posts, that PowerApps team admits that behaviour, and they are going to fix it in 2nd quarter this year

(2) using SQL server database with a Gateway connector to show image:

It works fine, but again - only with a path to the image, and the path should be publicly accessible

I do not want to expose my images publicly - do you know if there is a way to show the images, and the access rights to that images to be the same as to the SharePoint List?

Or - if the image is into the SQL database (image binary column) - then the access is coming by the connection string - it will be fine for me. The problem is that PowerApps cannot show the image (unless it is a path to the public website) 

Any suggestions are welcome, thanks

Regards,

Yakimo

[v-yamao-msft]

Hi Yakimo,

Are you using OneDrive for Business?

I hope my steps could be a reference for you, it really works fine on my side.
1. Save images to OneDrive for Business.
2. Create a SharePoint list, get Image URL from OneDrive for Business. Share the list with group members with Edit Permission level.
3. Create an app based on the list. Of course, all the images are shown on my app. Save the app to cloud.
4. Then share the app to group members with User permission.
5. Run the app on iPhone, I can see the images with my own account on iPhone, and my shared users can also see the images on iPhone.

Please try my steps to see if it works for you. I guess this way will not expose your images publicly.

About SQL server image binary column, it is currently not supported yet, I don’t have a time line on when it will be supported.

Best regards,
Mabel Mao

[Yakimo]

Hi Mabel Mao

Thank you for your detailed reply.

I think I have some партиал success and some observations. Success - the image is on iPhone, if the URL contains Authkey

This is what I did: 

I created a list, with two image fields.

- first image field contains the web address I got when I share the image (i.e. incl. authkey) 

https://metroservice-my.sharepoint.com/personal/tzy_metroservice_dk/_layouts/15/guestaccess.aspx?doc...xxxxxxxx (file name is not present in the address)

- the second field contains the URL I get when I click the link from (1) - it contains the file name and path, like 

https://metroservice-my.sharepoint.com/personal/tzy_metroservice_dk/Documents/SubFolder/Folder//Cate...

I put both images on PowerApp screen.

If I run in designer - I can see both images. If I run it from my iPhone - voilà!- I can see only the image - this with Path that contains Authkey - the left one. Next to it to the right shall be the other image.

See the screenshot (note the address below the images):

So - at last - I am able to show images. But my problem is, that I would like to share the folder, and put the folder/file URL into the field.

Because I have 300 images and it is difficult every time I add an image, to share it separately and to get a link (with Authkey) - it will be cumbersome

Do you have any suggestion how to overcome that?

Thanks again,

Yakimo

[Mateo_Escobar]

Hi, @agigliotti

Also it can do it of the next form, define the field in sql server nvarchar(MAX): 

and image in sql server must be encoded base64, Here can do it or powerapps can do it for default :

https://www.base64-image.de/

example:

 

this is result: 

if it works for you, Please notification me 

[agigliotti]

I got this to work.  Thank you.  In my case, I was transferring data from a postgres database to a SQL Server database because PowerApps from what I understand does not support Postgres.  The Postgres database has image files stored in a bytea field. 

So, first I needed to convert the Postgres bytea field to base64 and from bytea to text using the following (p.ppt_photo is the field name in postgres: 

encode(p.ppt_photo::bytea, 'base64')

Using SSIS, I pulled this field into SQL Server into an nvarchar(max) field, and after that I needed to update the field as follows so that it was encoded as base64 jpeg. 

update ppt_mas set ppt_photo_nvarchar2 = 'data:image/jpeg;base64,' + ppt_photo_nvarchar2;

For some reason, and it may be something in SSIS, the field in SQL Server ended up with a number of blank spaces.  They may not have been spaces, but could have been tabs, because replace(ppt_photo_nvarchar,' ','') did not get rid of them.  I found a function that gets rid of spaces, tabs, and more as follows:

CREATE FUNCTION [dbo].[RemoveAllSpaces]

(@MyString as varchar(Max))

Returns varchar(Max)

As

Begin

--NULL

Set @MyString = Replace(@MyString,CHAR(0),'');

--Horizontal Tab

Set @MyString = Replace(@MyString,CHAR(9),'');

--Line Feed

Set @MyString = Replace(@MyString,CHAR(10),'');

--Vertical Tab

Set @MyString = Replace(@MyString,CHAR(11),'');

--Form Feed

Set @MyString = Replace(@MyString,CHAR(12),'');

--Carriage Return

Set @MyString = Replace(@MyString,CHAR(13),'');

--Column Break

Set @MyString = Replace(@MyString,CHAR(14),'');

--Non-breaking space

Set @MyString = Replace(@MyString,CHAR(160),'');

Set @MyString = LTRIM(RTRIM(@MyString));

Return @MyString

End

This ended up working.

[agigliotti]

OK,

As I said, I was able to display photos from an nvarchar(max) type field in SQL Server, however, there is another problem, and hopefully someone can help.

The photos are causing the app to run extremely slowly, and it doesn't matter whether I display them on the app or not.  If they are in the source database, the app runs way too slowly to be useful.  For example, when doing a search for records, it can take up to a minute, and there are only a couple of hundred of records.  

Does anyone have any creative ideas to keep performance at a usable level, while still being able to display photos?