AsyncImage in SwiftUI

AsyncImage is a SwiftUI view that simplifies loading and displaying images from remote URLs. It handles the asynchronous nature of network requests, provides loading states, and manages caching automatically.

What is AsyncImage?

AsyncImage is a SwiftUI view introduced in iOS 15 that loads and displays images from a URL asynchronously. It eliminates the need for manual URLSession code and state management when displaying remote images.

Basic Usage

Here's a simple example of using AsyncImage:

import SwiftUI

struct ImageView: View {
    var body: some View {
        AsyncImage(url: URL(string: "https://wesleydegroot.nl/assets/avatar/avatar.png"))
            .frame(width: 200, height: 200)
    }
}

Handling Different States

You can customize the appearance during different loading phases:

struct EnhancedImageView: View {
    let imageURL = URL(string: "https://wesleydegroot.nl/assets/avatar/avatar.png")

    var body: some View {
        AsyncImage(url: imageURL) { phase in
            switch phase {
            case .empty:
                ProgressView()
            case .success(let image):
                image
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            case .failure:
                Image(systemName: "photo")
                    .foregroundColor(.gray)
            @unknown default:
                EmptyView()
            }
        }
        .frame(width: 200, height: 200)
    }
}

Use Case: Image Gallery

Here's an example of using AsyncImage in a grid layout:

struct ImageGalleryView: View {
    let imageUrls = [
        "https://wesleydegroot.nl/assets/avatar/avatar_401.png",
        "https://wesleydegroot.nl/assets/avatar/avatar_402.png",
        "https://wesleydegroot.nl/assets/avatar/avatar_403.png",
        "https://wesleydegroot.nl/assets/avatar/avatar_404.png"
    ]

    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
            ForEach(imageUrls, id: \.self) { urlString in
                AsyncImage(url: URL(string: urlString)) { image in
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                } placeholder: {
                    Color.gray.opacity(0.3)
                }
                .frame(width: 100, height: 100)
                .clipped()
                .cornerRadius(8)
            }
        }
        .padding()
    }
}

Caveats

• AsyncImage does not provide advanced caching options

• For more control, consider using third-party libraries or building a custom solution

• Images are cached automatically by URLSession, but cache control is limited

• For better performance with many images, consider using CachedAsyncImage or similar libraries

Alternatives

For more advanced image loading features, check out:

• CachedAsyncImage - My package for enhanced async image loading with better caching

• SDWebImageSwiftUI - Popular third-party library

• Kingfisher - Another popular option with extensive features

Wrap up

AsyncImage is a convenient built-in solution for loading remote images in SwiftUI. While it works well for basic use cases, consider alternatives for apps that require advanced caching or loading features.

Resources:

• AsyncImage

• https://github.com/0xWDG/CachedAsyncImage

Read more

• JavaScriptCore • 6 minutes reading time.
• Searchable Modifier in SwiftUI • 3 minutes reading time.
• TextField Styles in SwiftUI • 3 minutes reading time.

Share