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 images5. 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