Load/Cache async Image with URL in SwiftUI with Loading indicator

Moussa Hellal
2 min readNov 18, 2023

Images and loading them is one of the building blocs of any application. Today’s will be about Loading Images, caching them and show a loading indicator when Image is still not fully shown.

Let’s Get Started:

We are going to use this very powerful framework it handles everythign for us including:

async image loading, memory/disk caching, animated image playback and performances.

First Step:

Add the Swift Package to your project through SPM

let package = Package(
dependencies: [
.package(url: "https://github.com/SDWebImage/SDWebImageSwiftUI.git", from: "2.0.0")
],
)

or through CocoaPods

pod 'SDWebImageSwiftUI'

Second Step:

Search for a cat image or any image you’d want to use, you can use this image URL:

https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg

Third Step:

Import the package in your SwiftUI View:

import SDWebImageSwiftUI

Simply use this code

WebImage(url: URL(string: "https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187_square.jpg"))
.resizable()
.indicator(.activity)
.frame(width: 250, height: 250)
.padding()

Now we have an Image which have loading indicator and caching mechanism so next time your app won’t need to load it again.

That’t it! Easy right? Thanks to https://github.com/SDWebImage/SDWebImageSwiftUI and its powerful set of APIs.

I appreciate you choosing this article to learn about “Load/Cache async Image with URL in SwiftUI with Loading indicator”.

I hope that my piece was informative and helpful to you.

Farewell, keep growing and learning. See you in the next one. ✌️

Make sure to follow me on Twitter to keep receiving the newest articles:

https://twitter.com/codeWithMoses

--

--