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

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/mosesCodeOs