Asynchronously load images with customized AsyncImage view in SwiftUI

To use AsyncImage, you simply provide a URL to the image you want to display, and AsyncImage takes care of the rest. It will show a placeholder image while the actual image is being downloaded and then update the view with the downloaded image when it’s available.

The simplest way to use it is like so:

 AsyncImage(url: URL(string: "https://example.com/image.jpg")) { image in
    image
        .resizable()
        .aspectRatio(contentMode: .fit)
} placeholder: {
    ProgressView()
}

As you can see in the example above, we provide a URL to the image we want to display and a closure that specifies how the downloaded image should be displayed (in this case, we make it resizable and set its aspect ratio). We also provide a placeholder view to be shown while the image is being downloaded (in this case, a ProgressView).

While the built-in AsyncImage view in SwiftUI is quite powerful and versatile, there are times when you may need to create a custom version of the AsyncImage view to meet the specific requirements of your app. For example, in some cases, you may need a custom AsyncImage view that can load and display images from various sources, including remote URLs, local files, and captured images from the device’s camera.

To create a custom AsyncImage view that can handle all three types of images, we can start by defining the ImageLoader that fetches the image from the source and emits image updates to a view.

Let’s begin with the implementation of the loader:

import SwiftUI
import Combine
import Foundation

// 1
enum ImageSource {
    case remote(url: URL?)
    case local(name: String)
    case captured(image: UIImage)
}

// 2
private class ImageLoader: ObservableObject {
    private let source: ImageSource

    init(source: ImageSource) {
        self.source = source
    }

    deinit {
        cancel()
    }
    
    func load() {}

    func cancel() {}
}

Here is a breakdown of what is happening with the code:

1. Define an enum ImageSource that can take in three different types of image sources: a remote URL, a local file name, and a captured image.

2. Create an ImageLoader to bind image updates to a view.

Let’s implement image loading and cancelation.

Next, implement the AsyncImage view:

// 1
struct AsyncImage<Content>: View where Content: View {

    // 2
    @StateObject fileprivate var loader: ImageLoader

    // 3
    @ViewBuilder private var content: (AsyncImagePhase) -> Content

    // 4
    init(source: ImageSource, @ViewBuilder content: @escaping (AsyncImagePhase) -> Content) {
        _loader = .init(wrappedValue: ImageLoader(source: source))
        self.content = content
    }

    // 5
    var body: some View {
        content(loader.phase).onAppear {
            loader.load()
        }
    }
}

What this code is doing:

1. Defines an AsyncImage view that takes a generic type Content which itself must conform to the View protocol.

2. Bind AsyncImage to image updates by means of the @StateObject property wrapper. This way, SwiftUI will automatically rebuild the view every time the image changes.

3. The content property is a closure that takes an AsyncImagePhase as input and returns a Content. The AsyncImagePhase represents the different states the image can be in, such as loading, success, or failure.

4. The default initializer takes an ImageSource and the closure content as inputs, which lets us implement a closure that receives an AsyncImagePhase to indicate the state of the loading operation.

5. In the body property, we start image loading when AsyncImage’s body appears.

By creating a custom AsyncImage view, you can customize its initializer to suit your specific needs. For example, you might want to add support for placeholder images that display while the image is still loading or the loading fails.

extension AsyncImage {

    // 1
    init<I, P>(
        source: ImageSource,
        @ViewBuilder content: @escaping (Image) -> I,
        @ViewBuilder placeholder: @escaping () -> P) where
        // 2
        Content == _ConditionalContent<I, P>,
        I : View,
        P : View {
        self.init(source: source) { phase in
            switch phase {
            case .success(let image):
                content(image)
            case .empty, .failure:
                placeholder()
            }
        }
    }
}