init(request:scale:transaction:content:)

Declaration

nonisolated init(request: URLRequest?, scale: CGFloat = 1, transaction: Transaction = Transaction(), @ContentBuilder content: @escaping (AsyncImagePhase) -> Content)

Parameters

• request:

  The Urlrequest of the image to display.

• scale:

  The scale to use for the image. The default is 1. Set a different value when loading images designed for higher resolution displays. For example, set a value of 2 for an image that you would name with the @2x suffix if stored in a file on disk.

• transaction:

  The transaction to use when the phase changes.

• content:

  A closure that takes the load phase as an input, and returns the view to display for the specified phase.

Discussion

If you set the asynchronous image’s URLRequest to nil, or after you set the request to a value but before the load operation completes, the phase is AsyncImagePhase.empty. After the operation completes, the phase becomes either AsyncImagePhase.failure(_:) or AsyncImagePhase.success(_:). In the first case, the phase’s error value indicates the reason for failure. In the second case, the phase’s image property contains the loaded image. Use the phase to drive the output of the content closure, which defines the view’s appearance:

AsyncImage(url: URLRequest(url: imageURL)) { 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.
    }
}

To add transitions when you change the URLRequest, apply an identifier to the AsyncImage.

You can specify the cache policy and timeout interval via request.

See Also

Loading an image with a URL request

• init(request:scale:)
• init(request:scale:content:placeholder:)