Async Image - How to load a remote image from a URL in SwiftUI introduced in iOS 15

In this SwiftUI tutorial, we will learn how to load and display an image asynchronously from the Internet.

Note that the SwiftUI's AsyncImage view uses the shared URL Session instance to load an image from a specified URL and then display it on the screen. 

Loads and displays a modifiable image from the specified URL using a custom placeholder until the image loads. Until the image loads, SwiftUI displays the placeholder view that you specify. When the load operation completes successfully, SwiftUI updates the view to show content that you specify, which you create using the loaded image. 

struct ContentView: View {
    private let imageURL: String = "https://images.pexels.com/photos/4725133/pexels-photo-4725133.jpeg"
    var body: some View {
        AsyncImage(url: URL(string: imageURL)) { phase in
            if let image = phase.image {
                image.resizable().scaledToFit() // Displays the loaded image.
                
            } else if phase.error != nil {
                // Indicates an error.
                Image(systemName: "ant.circle.fill").iconModifier()
            } else {
                //Acts as a placeholder.
                Image("placeholder")
            }
        }
    }
}

To animate the remote image, we need to specify an optional transaction parameter for the Async Image. Transaction. Animation Spring. Response. 0.5. Damping Fraction. 0.6. Blend Duration. 0.25. With this transaction, we defined what kind of animation we want to run each time when the image downloads from the Internet. The final information that we still need to provide to work this animation is some type of transition.  we can choose from. In the rest of the tutorial, we will have playing with some of the available transitions.

struct ContentView: View {
    private let imageURL: String = "https://images.pexels.com/photos/4725133/pexels-photo-4725133.jpeg"
    var body: some View {
        AsyncImage(url: URL(string: imageURL), transaction: Transaction(animation: .spring(response: 0.5, dampingFraction: 0.6, blendDuration: 0.25))) { phase in
            switch phase {
            case .success(let image):
                image
                    .resizable()
                    .scaledToFit()
                    .transition(.move(edge: .bottom))
                    .transition(.slide)
                    .transition(.scale)
            case .failure(_):
                Image(systemName: "ant.circle.fill")

                    .scaledToFit()
                    .resizable()

            case .empty:
                Image("placeholder")
            @unknown default:
                ProgressView()
            }
        }
        .padding(40)
        
    }
}}

We covered all features of SwiftUI async image from iOS 15. With building this mini-application, we covered all features of SwiftUI's Async Image. From iOS 15, no third-party plug-in is needed if we would like to load remote image assets from the Internet. Wrap Up. Just to recap the main features of this dedicated Async Image view. To load an image from the Internet is as simple as providing an optional URL for the Async Image.

Thanks for reading!!

Similar solutions you may also like...

• How many ways to achieve Concurrency/Multithreading iOS getting started with Grand Central Dispatch (GCD) Swift 5.2 ?

• Choosing Between NSOperation and Grand Central Dispatch in iOS Swift 5 | Using Operations and OperationQueues in iOS Swift 5

• When should we choose Any or AnyObject?

• Memory Management with ARC and Avoiding retain cycles with Weak and Unowned in Swift.

• Implement Your Own Side Menu (Hamburger Menu) Swift 5.2

• Generating QR Code with SwiftUI