How to add a hosted image to a view in Swift

A step by step tutorial on adding a hosted image to a UIView in Swift (iOS). Github repository included.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/22/2022 at 12:47
Last Updated on 08/27/2022 at 12:05
A flower that represents Swift next to a flower that represents XCode. Beneath it sits the text that states 'Add a hosted image to a UIView'.

A step by step tutorial on adding a hosted image to a UIView in Swift (iOS). Github repository included.

The following tutorial builds on our Open Source Swift and demonstrates how to load a hosted image on a UIImageView. This tutorial starts on the main branch and the changes are available on the tutorials/hosted-image branch of the repository below.

Clone the repo's main branch, before starting the tutorial.

git clone git@github.com:delasign/swift-starter-project.git
Download Open Source projectHow to create a SwiftLint enabled Swift Xcode Project

Please note this tutorial uses the TinyConstraints Swift package, which we added using the Swift Package Manager.

Discover TinyConstraintsHow to add a Swift Package Manager package dependency

Step One: Declare your variable

A screenshot showing you how to create a UIImageView in Swift.

In CustomUIView.swift, declare your UIImageView.

let imageView: UIImageView = UIImageView()

Step Two: Setup your Imageview and add it to the view

A screenshot showing you how to setup your UIImageView

In CustomUIView+UI.swift setup your image view. Sample code below.

Here we have set the imageView to:

  • Sit below the label, at an offset of 20 pixels.
  • Center itself horizontally on the view
  • Have a width and a height of 250 pixels.

Step Three: Add Hosted Image

A screenshot showing you how to download and set a hosted image.

For the example shown, we are using the delasign banner hosted on AWS which uses the following url:

https://www.delasign.com/CDN/seo-images/delasign.jpg

The code example below shows how to gather it and place it as the UIImage, within the UIImageview.

Please note that we have set the backgroundColor to red to confirm that the image loads. We also set the content mode to scaleAspectFit.

Learn more about UIImageView Content Modes.

Step Four: Verify

An image showing you how the screen changes between the app starting and the image downloading.

Run your app to verify that the image appears.

Any Questions

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe