Skip to Content
iOS🌐 NetworkingAsync Images

Async Images

1. AsyncImage (iOS 15+)

AsyncImage(url: URL(string: "https://example.com/image.jpg"))

2. Với Placeholder

AsyncImage(url: URL(string: urlString)) { image in image .resizable() .aspectRatio(contentMode: .fill) } placeholder: { ProgressView() } .frame(width: 100, height: 100)

3. Phase Handler

AsyncImage(url: URL(string: urlString)) { phase in switch phase { case .empty: ProgressView() case .success(let image): image .resizable() .aspectRatio(contentMode: .fill) case .failure: Image(systemName: "photo") .foregroundColor(.gray) @unknown default: EmptyView() } }

4. Với Scale

AsyncImage(url: url, scale: 2.0) // For @2x images

5. Caching

AsyncImage không cache mặc định. Dùng thư viện như Kingfisher hoặc custom:

// Custom cached image view struct CachedAsyncImage: View { let url: URL @State private var image: UIImage? var body: some View { Group { if let image = image { Image(uiImage: image) .resizable() } else { ProgressView() .task { image = await loadImage() } } } } func loadImage() async -> UIImage? { // Check cache, then load } }

📝 Tips

  • Luôn handle failure state
  • Specify frame cho consistent layout
  • Consider caching cho performance
Last updated on