AsyncImage
A view that asynchronously loads and displays an image.
Declaration
nonisolated struct AsyncImage<Content> where Content : ViewOverview
This view uses the shared URLSession instance to load an image from a URL that you specify, and then display it. For example, you can display an icon that’s stored on a server:
AsyncImage(url: URL(string: "https://example.com/icon.png"))
.frame(width: 200, height: 200)Until the image loads, the view displays a standard placeholder that fills the available space. After the load completes successfully, the view updates to display the image. In the example above, the icon is smaller than the frame, and so appears smaller than the placeholder.
[Image]
You can manipulate the loaded image in the content parameter using init(url:scale:content:placeholder:). For example, you can add a modifier to make the loaded image resizable:
AsyncImage(url: URL(string: "https://example.com/icon.png")) { image in
image.resizable()
} placeholder: {
ProgressView()
}
.frame(width: 50, height: 50)With this initializer, you can also specify a custom placeholder. In the code in the previous example, SwiftUI shows a ProgressView first, and then the image scaled to fit in the specified frame:
[Image]
If you use an Image as a placeholder view and it doesn’t load, SwiftUI doesn’t show anything as a placeholder and doesn’t report an error.
To gain more control over the loading process, use the init(url:scale:transaction:content:) initializer, which takes a content closure that receives an AsyncImagePhase to indicate the state of the loading operation. Return a view that’s appropriate for the current phase:
AsyncImage(url: URL(string: "https://example.com/icon.png")) { phase in
if let image = phase.image {
image // Displays the loaded image.
} else if phase.error != nil {
Color.red // Indicates an error.
} else {
Color.blue // Acts as a placeholder.
}
}In iOS 27, macOS 27, watchOS 27, tvOS 27, and visionOS 27 and later, AsyncImage caches downloaded image data following the transport protocol. The system creates the cache with a default URLSessionConfiguration. To change the cache policy, specify the change in URLRequest, and pass it to init(request:scale:transaction:content:). To customize the download process in a specific view hierarchy, use asyncImageURLSession(_:) to specify a URLSession. AsyncImage uses this session to perform data tasks when downloading the image data.