Using AsyncImage in SwiftUI for Asynchronous Image Download

In WWDC 2021, Apple announced lots of new features for the SwiftUI framework to make developers’ lives easier. AsyncImage is definitely one of the new views introduced in iOS 15 that is worth mentioning. If your app needs to download and display images from remote servers, this new view should prevent you from writing your own code to handle asynchronous downloads.

AsyncImage is a built-in viewer for loading and viewing distant images asynchronously. All you need is to tell it what the image URL is. AsyncImage then do the heavy lifting to grab the remote image and display it on the screen.

In this tutorial I will show you how to work with AsyncImage in SwiftUI projects. To follow the tutorial, be sure to use Xcode 13 and iOS 15.

The basic use of AsyncImage

The easiest way to use AsyncImage is to enter the image URL as follows:

AsyncImage then connects to the given URL and downloads the remote image asynchronously. It also automatically renders a placeholder in gray while the image is not yet ready for display. Once the image is fully downloaded, AsyncImage displays the image in its own size.

If you want to make the image smaller or larger, you can pass a scaling value to scale parameters like this:

A value greater than 1.0 scales the image. Conversely, a value less than 1 will make the image larger.

asyncimage scale image

Adjust image size and placeholder

AsyncImage provides another designer for developers if you need further customization:

By initializing AsyncImage user init above, we can resize and scale the downloaded image to the preferred size. On top of that, we can deliver our own implementation to the placeholder. Here is an example of a code snippet:

In the code above, AsyncImage gives the resulting image for manipulation. We then apply resizable() and scaledToFill() modifier to resize the image. For AsyncImage display, we limit the size to 300 × 500 pixels.

That placeholder parameter allows us to create our own placeholder instead of using default. Here we show a placeholder in light purple.

asyncimage-swiftui-change-image-size

Handling different phases of the asynchronous operation

That AsyncImage view provides another constructor if you need to provide better control for the asynchronous download operation:

AsyncImagePhase is an enum that keeps track of the current phase of the download operation. You can provide detailed implementation for each of the phases, including empty, failure, and success.

Here is an example of a code snippet:

That empty mode indicates that the image is not loaded. In this case, we show a placeholder. For success mode, we apply a few modifiers and display it on the screen. That failure mode allows you to provide an alternate view if there are errors. In the code above, we simply show a system image.

swiftui asyncimage phase

Adding animation with transaction

The same init lets you specify an optional transaction when the phase changes. For example, the following snippet of code indicates to use a jump animation in transaction parameter:

By doing so, you will see a fade-in animation when the image is downloaded. If you test the code in the preview pane, it will not work. Be sure to test the code in a simulator to see the animation.

You can also attach transition modifier to image look like this:

This creates a slide-in animation when the resulting image is displayed.

swiftui-asyncimage-animation


Founder of AppCoda. Author of several iOS programming books, including beginning iOS programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Follow me on Facebook, Twitter and Google+.

William

Leave a Reply

Your email address will not be published.