# Async Images in SwiftUI

Hi all, in today’s post, I’m going to share how to present images from a URL or Base64 data string with `AsyncImage` in SwiftUI.

Environment: Xcode 14.3 beta 2 (14E5207e), iOS 16.4

The source code of this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202303-Mar%202023/AsyncImage).

# Images from a URL

Let’s declare a URL string as the data source. You can use the URL below from my git repo of this post.

Then declare an `AsyncImage` element. There are three parameters needed:

1. URL. Note that the type is `URL` instead of a string. So we need to initiate a URL with our URL string.
    
2. Content, which is `(Image) -> View`. This means a closure where we can modify the image obtained from the URL and return the result as a SwiftUI view.
    
3. Placeholder, which is () -> View, is basically a closure that returns a SwiftUI view, used as the placeholder while the image is loading or failed to load.
    

The example below shows how we can use an `AsyncImage` element. I passed the URL and styled the image with a sized circle clip, and provided it with a progress view as a placeholder.

```swift
let validURL: String = "https://raw.githubusercontent.com/xavier7t/iOSDevX/main/iOSDevX/Assets.xcassets/demo.imageset/demo.png"
// Demonstrating an async image from a URL
Text("Valid URL:").bold()
AsyncImage(url: URL(string: validURL)) { image in
    image
        .resizable()
        .clipShape(Circle())
        .frame(width: 150, height: 150)
} placeholder: {
    ProgressView()
}
```

You should be able to see the image fetched successfully, in the preview canvas.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677725417454/ed06e1aa-1cbf-476f-82d3-754e0050e3a5.png align="center")

# Invalid URL

Now let’s try to pass an invalid URL to see how the placeholder works if the image cannot be loaded.

Simply replace the URL string with a string that does not present a URL of an image, for example, an empty string `""`.

```swift
Text("Invalid URL:").bold()
AsyncImage(url: URL(string: "")) { image in
    image
        .resizable()
        .clipShape(Circle())
        .frame(width: 150, height: 150)
} placeholder: {
    ProgressView()
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677725579018/9ed7bb22-b9b5-4307-83f0-ca626b08124b.png align="center")

Now the placeholder will show up since the image won’t be loaded.

Please note that having a placeholder is considered a good practice, and the choice of the placeholder might depend on the project, usually the context and the image you’re trying to present.

For instance, if the async image is a user’s profile image, a "person.circle" icon `Image(systemName: "person.circle")` would be a good choice.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677725820484/4173f7fd-2239-4772-b186-74d2143cde2c.png align="center")

# Images from Base 64 Data String

`AsyncImage` can also be used to convert a base 64 data string to a SwiftUI image.

Please note that the base 64 string must have a prefix of `"data:image/png;base64,"` for `AsyncImage` parsing.

Now let’s try with the data string below.

```swift
    let imageData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ8AAAC6CAMAAACHgTh+AAAAjVBMVEX////wUTjvPhzvRSb5x8LwTjP+9fTwSzHyb171iXfwSi7wTTPvRyrvQSDvQyTwTzb6z8rvPBj96ef1kIT1l4v5wLn3r6bxX0r4urLwVz/97Or83trzgXP84+D3p57yaVfze2z2n5T719PxZE/zfGz2pJvxWUPybl30i37zdWX4ta7uJAD60czvNwz1g3AKgiSYAAAEpUlEQVR4nO3c6XaqOgAFYAIiFTKI4CxOdFBue97/8W6E0qIEi5Yu2rC/P9pqusheZCJQwwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBfadi7wbLto/1hvRXj1g0YXfXaPuafEx1Nh9xGOIzomkji35pGFom5avvIf0TA7knjxCX9tg++eSG/Nw5CvHnbR9+4nn9/HPIMeWz7+JsmxHfyIGzcdgWaNbO+FQcRtO0aNIvUOT3ElfHHmrVdhSa91hlbxDxklbHZm7br0KTQrZEHoeuRW/lFrtOYe/Tq5EH8yNhWDct82HYlGmSX2oGyYXiyUTxVNC26brsSzembperFyjOGybXKpPzlE0ejWXs5DyfYqAYT8WxUBeK9tF2L5hTzEHb6wvdTVSCnE8SYqJqM/dB2LZpTyEPEW5pWb9p/VowlTjoxXysC0TQPQmdBOoS4A+OBKk6QxanAofyJrnkIunhK13ZsZjyWZ/F0kpaY2l3JgwjXGPtyuBU8Mg6lhuEd0xJRaTmsbR7EeTEiKjtTe24Yu8uxRNBsHrq+PHX0zYPQwOg/yPrSgZGdKkVsn5W5bDEa55FezQhNQVgil3r8vOI0ycr0LpqSznmQt6VhzEw7nW4syNm464bvhS7WPFrnIU6r1WhK5WAjPz4W+4qPefnFCaJ1HsSLT93mwfTI6fOdKcp5GLHdnTyIm1Z7xmg6vg59r5zH+TVGzfMgPO0nRrF/yF5pKY8+71Ie+SXz8L9sQAne24xz+Ch21qNqn4dg2cbs3s+m6GOeVv9jfJHrXNqlPIjwX7OPD9mlwNHm1GFYn9vXS9apPORKZpF9Pnx/3TGbmNFnOb9becjFyuj8i8u5VdyqnYtu5UFs73IXYRcWflg5HcuDeFdvZTh0Lg/i5X2ISgfzILY1qizXxTyIqA5E8zwq9u/ziVmZ3uOLeAlM5TalYBU3MxQXMPrlQazx0FZsMUhmqCoW6T4/9Rf9wHRV54il2p09W/DrmIdw5PtAWKXNFSJMUi424lr3H5KT3uWTbHzqFKoqHG6tVfOyMdM8D+Ju018skkfKOE1xZm3HFbPUjad5HsQK8l+OhslaSobV8zHZYnTPg1jHW0p+XiLTNQ/ixjeUHHLt8yAe39cvagnt8yDCr39v3McSRuM8ZCcyr/sk2Ix2IQ95iqyuXQhaTsLBLr3K/Mo7kYecmrGwohtZ7J5N6jou8+S6d5/n4d00Lv1ufdXDL8JlsWIeFoU0X+EIf/yZh1b3n1L1ffq2xY6TYk+ynMRn672312Weh6tcAv9Rm/IKLm8GlNHN4yBJknC1ke/Pvyimk/zmEKrTAx/BtecbhO04ch3jOuW73GWjyt+xGyYtv97wGw8Tvgej1wNSFR1IfTp1p8YXDaYO/8oq+A/qq68k1+YO2q5Bw2Z3P519Iq7t4v1N2++0GFOnwfbd9O5AhDlp++B/wvHOQdezNHs4Ozd5U+69fHFy8Dj6+k//Tf3A4a5iFlqZhZzNzzXsOgp6Yez63KnD8ufbJ51m6ZX2/wZf+6fr/8kBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQwv/ORj9orOzxtwAAAABJRU5ErkJggg=="
```

Again, declare an `AsyncImage` element. Then pass the base 64 data string to the initializer.

```swift
AsyncImage(url: URL(string: imageData)) { image in
    image
} placeholder: {
    ProgressView()
}
```

Now you should be able to see a Swift logo icon in the preview canvas.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1677726111468/ec47f457-1f2c-48f1-9d09-f16bfcbff237.png align="center")

And that’s all of today’s content. Now I hope you know how to present an image from the internet or base 64 strings with SwiftUI `AsyncImage`.

If you find it helpful, please leave a comment and don’t forget to subscribe to my newsletter to get more posts like this via email. I’ll see you in the next post!