【SwiftUI】AsyncImageを使ってURL画像を表示する

はじめに

iOS15からAsyncImageが使用できます。
これを使用することでURL画像が表示できるようになります。
便利ですねー

ただiOS15からなので使えるようになるのはまだ先になりそうです。

実装方法

標準

import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url))
    }
}

サイズ変更(scale)

import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url), scale: 5)
    }
}

サイズ変更(frame)

import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url)) { response in
            response.image?
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
        }
    }
}

プレイスホルダー

import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url)) { image in
            image
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
        } placeholder: {
            ProgressView()
        }
    }
}

プレイスホルダー & 切り替えアニメーション

import SwiftUI

struct ContentView: View {
    private let url = "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1745371/16fffb96aaa9ea64e44d21f407f053ca3445a99b/x_large.png?1633600430"
    var body: some View {
        AsyncImage(url: URL(string: url), transaction: .init(animation: .easeInOut(duration: 1))) { response in
            switch response {
            case .success(let image):
                image
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100, height: 100)
            default:
                ProgressView()
            }
        }
    }
}

注意
Previewではアニメーションされません

おわり

SwiftUIの完成はiOS20くらいかな？？