How to load a image from URL in swiftUI

One of the latest framework that Apple has introduced in WWDC19 is SwiftUI and Combine.

SwiftUI is a new way for making you UI in a declarative way. Combine works along with SwiftUI and provides a declarative Swift API for processing values such as UI or Network events.

In this project, we are going to load an image from remote URL and how to use them in SwiftUI.

For beginners,I recommend you to read this article which explains the basic’s of SwiftUI and this articles which shows how to work with SwiftUI.

Let’s get started by creating a project in Xcode 11 and make sure SwiftUI checkbox is selected before creating new project.

1) Create a Model class to get remote image URLs

Model class

• Identifiable is a protocol (that comes with the SwiftUI Framework) that serves to compare and identify elements.

• Create a imageURLArray to save remote imageURL’s

2) Create a simple List to Load Remote Images

Simple List to Load Remote Images

• ForEach will create number of rows for List based imageURLArray elements.

• Id is used to identify each model array elements and use them in list.

• ImageRow(model: model) is new structure which implements each row’s View content

ImageRow — custom View for each cell in list

• We have implemented a VStack(alignment: .center) which will make sure image is aligned centered in each row

• ImageViewContainer(imageURL: model.imageURL) is where we load the image from remote URL.

initialize remoteImageUrl and used them in Image

• ObjectBinding — A dynamic view property that subscribes to a bindable object automatically, invalidating the view when it changes.

• We have initialize the remoteImageURL and used that in Image

Image(uiImage: remoteImageURL.data)

• To load image from remoteURL we will get *data*values, when data values are taking time to load them in images.

• To prevent crash when loading remote image from URL, we have used an default image which has to imported to Assets.xcassets

• Whenever data is available ,it will show the remote image or else it will show static image which we have used.

• Image is customized by using resizable which will make image resizable for all screens. frame which used to give width and height of Image and we have set aspectRatio(contentMode: .fit) which makes image have aspectRatio having image contentMode as Fit.

3) Load images from URL using URLSession:

Load images from URL using URLSession

• We need to make the RemoteImageURL model conforms to BindableObject. This is a protocol that will help us to automatically notify any subscriber when a value has changed.

• Whatever type you use with @ObjectBinding should conform to the BindableObject protocol, which has only one requirement: your type must implement some sort of didChange property that notifies the view when its data has changed.

• The PassthroughSubject which is also part of Combine has two methods : send and receive.

• To notify our subscribers, we’ll add a didSet on the data property observer in which will call the send method on our PassthroughSubject.

• An bindable object can notify its view that important data has changed using publishers from the Combine framework.

• If the bindable object happens to have several views using its data, then it will automatically notify them all.

• When you use a publisher to announce that your object has changed, this must happen on the main thread.