[SwiftUI] AsyncImage - 이미지를 비동기 처리로 불러와보자

- AsyncImage란?

iOS 15이상부터 사용 가능하다

---

- 사용방법

AsyncImage(url: URL(string: "https://example.com/icon.png"))
    .frame(width: 200, height: 200)

AsyncImage에 url 넣어주고 크기 잡아주면 끝난다

 

 

로딩이 된다는 것을 표현해주고 싶으면 아래 코드와 같이

import SwiftUI

struct DiscoverView: View {
    weak var navigation: UINavigationController?
    
    @StateObject private var viewModel = DiscoverViewModel()
    
    var body: some View {
        ScrollView(showsIndicators: false) {
            ForEach(0..<viewModel.allData.count, id: \.self) { index in
                RoundedRectangle(cornerRadius: 12)
                    .foregroundColor(.gray)
                    .overlay(
                        VStack(alignment: .leading, spacing: 0) {
                            RoundedRectangle(cornerRadius: 12)
                                .foregroundColor(.clear)
                                .overlay(
                                    ZStack {
                                        AsyncImage(url: URL(string: "https://image.tmdb.org/t/p/original" + (viewModel.allData[index].poster_path ?? ""))) { image in
                                            image
                                                .resizable()
                                                .scaledToFit()
                                        } placeholder: {
                                            CustomProggress()
                                        }
                                        //
                                        // 생략
                                        //
                                    }
                                )
                                .frame(height: 200)
                            
                            //
                            // 생략
                            //
                            
                        }
                    )
                    .frame(height: 300)
                    .padding(.horizontal, 16)
            }
        }
        
        
    }
}

내 코드의 일부에서 가져온 AsyncImage에 Placeholder를 설정하는 코드이다

나는 ProgressView를 커스텀으로 만들어서 사용중이나 기본 ProgressView를 사용해도 무방하다.

 

 

TMDB API에서 Image를 불러오는 모습