How to Display Images in Swift Cross-Platform Native Apps in SCADE
Tags: scade, swift, ios, android
Published: 2022-07-15 08:00:00

The image control, just like every other control in SCADE acts as a wrapper around native controls, exposing a fraction of its functionality to users. We'll learn how to display images from within the app or dynamically downloaded from the internet in this tutorial. We can't envision an app these days without images. Although the images are stored in the assets folder, they are loaded during runtime. [SCADE](https://www.scade.io/download/) currently only supports great image formats like PNG, SVG, and JPG.

## Key Properties Needed for Implementation: 
1. **content:**  it stores the images that you would like to display. Not to forget, it has a `Data` type. 
2. **URL:** relative path to the image's source. When initializing this attribute, ensure you have its path accurately sorted out. That’s, the image name comes last after you might have spelled out the folder you have the images stored in. See example: `Assets/shoe1.png`.
3. **isContentPriority:** this type-Bool property specifies which incoming source we use in rendering the image. It’s set to `false` if the `URL` field is used in getting information to display the image and set to `true` if the content field is used instead. 

There are three (3) possible ways you can use to add an image(s) to your Android and iOS apps in SCADE:

## Method One: Static Image Referencing
You can simply achieve this by using the **Widget Palette** to drag and drop the image control to any `.page` file of choice (for example `main.page`). Once this is done, make use of the **Path feature**, under the Image attribute, found on the right side of your page to find and select the image you want to display in your app from the folder that contains it. Interestingly, using this method, your images get stored automatically in your Assets folder.

**See the result below:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t79m5ucng8xzunr0d1y.jpeg)

## Method Two: Adding Images Using Code 
Two things you must never forget to do if you want to go with this approach:
1. Ensure that the path in the `URL` field is valid.
2. Initialize the `contentPriority` attribute value of your images to be `false`.

Remember, unlike in the above method, you will need to add your images manually to the Assets folder here to complete the phase of displaying your images in your desired area. Additionally, you may also use the **Scale Mode** built within the Image Control to make adjustments and ensure that your images are properly sized for your app. <br />

**See an example below:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqtj1xorgz7xo07ut7ch.jpeg)

**See code snippet below:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eg620bly8jdm2etldwby.png)

**Output on iOS:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma1pt7dcxv0weqxmk2kp.png)

**Output on Android:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mrmv44gmbzxmklezacv.png)

## Method Three: Using raw data from the Internet to display images 
Most apps require data to be fetched from a remote server, and downloading images is a frequent activity. This approach makes things convenient for you in the sense that you don’t need to initially store your images on your app before you can render them - all you need to do is to get the image addresses of the images of your choice from the internet or any other source.

The main goal of this method is to teach you how to download images using swift. First, add a third image control with the name **image3** underneath **image2** on the main page. Make use of the **Constraints property** to control its size and position just like you have done in the other two methods above.

**See an example below:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6027vtjgbehqx47z6ean.png)

This method is primarily focused on updating the Image Control on the main thread using Grand Central Dispatch. Creating a URL object that points to the remote image is the first thing we do. The next step is to invoke the `init(contentsOf:)` **initializer** on the Data object. We utilize the `try?` **keyword** and `optional binding` to safely access the initialization's result because the initializer is throwing. Lastly, in the body of the `if statement`, we put the raw image data received from the network call in the `content field` and also set the value of the `contentPriority` **property** to be `true`.

**See code snippet below:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y3q4kfezrfj64xnic1t.png)

**Output on iOS:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45oaph6qlw2lv4rtzw2g.png)

**Output on Android:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71pdclfhc9nvvl1cuu7f.png)

## Conclusion
This concludes the tutorial on how to display images in SCADE using Swift for Android and iOS, including all steps and examples. Feel free to use any of the above methods individually or collectively in your next SCADE project - everything depends on how you want your app structuring to be. The source code for this tutorial is available on [GitHub](https://github.com/Cdf-creator/ImageControl).