Jon Hoffman
Caching AsyncImage SwiftUI
Updated: Aug 18, 2022

A while back I was creating a list view where each element in the list displayed an image which was download from a web API and I use AsyncImage which is provided with SwiftUI to download and display the image. While building this app, I noticed that while scrolling through the list view, the images were downloaded each time an element was displayed. Even if the image was previously downloaded, AsyncImage would download it again. I thought that this was a waste of data and started looking for a way to cache the images. During this search I came across the CachedAsyncImage package: https://github.com/lorenzofiamingo/swiftui-cached-async-image
CachedAsyncImage is exactly what AsyncImage is except with caching capabilities. The best thing about this package is it provides a drop-in replacement for AsyncImage where no other code changes are necessary therefore in your code wherever you are using the following code:
AsyncImage(url: urlToImage)
All you need to do is to change it to this:
CachedAsyncImage(url: urlToImage)
And caching capabilities will be added. I use this package anytime I have a list or a scroll view that requires an image and we use it throughout the Open Source Mastering Swift Cocktail app. As an example, in the CocktailColumn view I use CachedAsyncImage like this:
CachedAsyncImage(url: URL(string: strDrinkThumb)) { phase in
switch phase {
case .empty:
ProgressView()
case .success(let image):
image.resizable()
.scaledToFit()
case .failure:
Image(systemName: "photo")
@unknown default:
EmptyView()
}
}
.frame(width: 150, height: 150)
.padding(.bottom, 10)
Notice that the CachedAsyncImage is used exactly like the AsyncImage with the AsyncImagePhases to change the image while it is being loaded or if there is a failure in loading.
There are installations instructions of CachedAsyncImage on the Github page for the project here: https://github.com/lorenzofiamingo/swiftui-cached-async-image