How can I display images in lists?

The evaluation of the image data takes place via URLs from your data source. You can, for example, add a link to the employee's profile picture (available online) and then display this picture directly in the detail view of your list.

In the example source file, column R contains the web links to the respective image files of the employee. During app creation, this column is defined as an "image" so that the image is displayed directly and not just a link to the file is visible.

Where can I host my pictures?

You have many possibilities to host your image files. It is only important that the images are publicly available and that the link leads directly to the image file. In the best case, a download of the file would also be initiated directly when you open the link in your browser.

Dropbox

For example, you can host your pictures with Dropbox and share them with people outside Dropbox. Create a shared link so the app can access your file via the link. To open the file, no Dropbox account is needed. ("Shared links: Give users read-only access to your files")

The created link looks like this, but has to be adjusted:

https://www.dropbox.com/s/a1b2c3d4ef5gh6/example.jpg?dl=0

You now have to force the file to be downloaded directly instead of just being displayed. You can do this by using dl=1 the query parameter in your URL. Example:

https://www.dropbox.com/s/a1b2c3d4ef5gh6/example.jpg?dl=1

OneDrive

In OneDrive there is a quick and easy option to embed photos that can be used in the list.

1. Go to the OneDrive website. You might need to sign in with your Microsoft account.

2. Pick the file you want to embed by selecting the checkbox in the upper-right corner of the file.

3. Select Embed at the top of the page, and then choose Generate.

4. Copy and paste the code in the excel.

This code will be displayed as an image in the app.

We currently do not know how to generate a direct link to the image file. If you know, leave us a comment :)

SharePoint

Use "Get link", then use "People with existing access" to get the direct link to the file. 

Then, the URL will be a direct path to https://org.sharepoint.com/personal/user_org/folder/filename.ext?d=oiuqjaweorihjlkj
Now, just remove everything after the ? and put in download=1 and magic happens. 
https://org.sharepoint.com/personal/user_org/folder/filename.ext?download=1

Depending on your Url you might have to use ?download=1 but this won’t work for every single file type either think only office files.

Google Drive

When using Google Drive you need to link to the image so that opening it immediately triggers the download. The link looks like this:

https://drive.google.com/uc?export=download&id=1z0MRGU0QTWl5BeymGtpIFRMYtWW_cXPR

Pay attention to the middle part here. uc?export=download& your link may look like this at first: https://drive.google.com/open?id=1z0MRGU0QTWl5BeymGtpIFRMYtWW_cXPR and has yet to be adapted!

Simply copy the id of your image from the lower link, and paste it into the first link above. You can also use this link as a template:

https://drive.google.com/uc?export=download&id=ENTERYOURIDHERE