A woman hand holding an iPhone and taking picture of the table right under. On the table there is an open book, with eye glasses, coffee, a small decorative plant and decorative table cloth. On top of the image the AsyncImage in SwiftUI title is written, and SerialCoder.dev with small letters at the bottom.
Credits: Photo by Ylanite Koppens from Pexels

Hands-on to the AsyncImage

AsyncImage(url: url)
let url = URL(string: "https://images.pexels.com/photos/8016369/pexels-photo-8016369.jpeg")
AsyncImage(url: url) { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
.padding()
} placeholder: {
placeholderImage()
}
@ViewBuilder
func placeholderImage() -> some View {
Image(systemName: "photo")
.renderingMode(.template)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 150, height: 150)
.foregroundColor(.gray)
}

AsyncImage and the AsyncImagePhase

AsyncImage(url: url) { phase in
switch phase {
case .success(let image):
image
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
.padding()

case .failure(let error):
Text(error.localizedDescription)

case .empty:
waitView()

@unknown default:
EmptyView()
}
}
@ViewBuilder
func waitView() -> some View {
VStack {
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .indigo))

Text("Fetching image...")
}
}
AsyncImage(url: url,
transaction: Transaction(animation: .easeInOut(duration: 2.5))
) { phase in
switch phase {
case .success(let image):
image
.resizable()
.aspectRatio(contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
.padding()

case .failure(let error):
Text(error.localizedDescription)

case .empty:
waitView()

@unknown default:
EmptyView()
}
}

Summary

An iOS & macOS app maker writing code in Swift. Author of countless programming tutorials. Content creator. https://serialcoder.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store