Developing an Application

Display an Image

Last updated
Save as PDF

OutSystems allows displaying different types of images in your applications such as static images, external images fetched from URLs, and images stored in the database.

To display a database image in a mobile app:

Add an aggregate to fetch the image from the database to the screen where you want to display it;
Drag the Image widget from the toolbox to the screen;
Set the property Type to Binary Data;
Set the property Image Content as the entity attribute that stores the image.

To display a database image in a web app:

Add an aggregate fetching the image from the database to the preparation action of the screen where you want to display it;
Drag the Image widget from the toolbox to the screen;
Select an existing image resource or import a new image as an image default. This image is used as a placeholder during design time and as default during runtime;
Select the image and change its property Type to Database;
Set the Attribute property to an entity attribute of type Binary Data that stores the image in the database;
Set the Filename property to the name of the file when the end-user saves the image;
Set the Entity Identifier property to the identifier of the specific entity record that contains the image to display.

Example in a Mobile App

In GoOut, a mobile application for finding and reviewing places, we want to display the end-user’s photo next to the detail.

To display the end-user's profile image:

Open the Profile screen and drag an Image widget from the toolbox to the top of the form with the details of an end-user;
Set the Type property to Binary Data;
Set the Image Content property to GetProfile.Profile.Profile.Photo, which is the Photo attribute of the GetProfile aggregate that fetches the end-user profiles;
Set the Default Image property to a generic avatar image which the application will display as default if the end-user does not have a profile photo;
Publish and test.

Example in a Web App

In the GoOutWeb application, a web application for finding and reviewing places, we want to display the photo of the end-users next to their personal details in the screen Profile.

To display a database image:

Open the Profile screen and drag an Image widget from the toolbox to the top of the form that edits the end-users details;
On the Select Image dialog, select an image already imported into the module or import a new one to be used as a default image. This image is used as a placeholder during design time and as fallback during runtime;
Set the Type property to Database;
Set the Attribute property to Profile.Photo, which is the attribute storing the photo of the end-users in the Profile entity;
Set the Filename property to GetProfileById.List.Current.User.Name + “.png” to define the image filename as the name of the end-user being edited;
Set the Entity Identifier property to the ProfileId input parameter that identifies the Profile record for the current end-user;
Publish and test.

Example in a Mobile App

Example in a Web App

See Also