-
SwiftUI Data Flow - 이미지 다운로드 및 디스플레이SwiftUI 100 레시피/Data Flow 2022. 6. 22. 11:58
1. ImageLoader.swift 화일 생성후 코드 작성
2. URLImage (SwiftUI) 화일 생성후 코드 작성
#1. ContentView
import SwiftUI
struct ContentView: View {
let posters = ["https://imgnews.pstatic.net/image/277/2022/06/21/0005106603_001_20220621171601527.jpg?type=w647",
"https://imgnews.pstatic.net/image/020/2022/06/22/0003435598_001_20220622093201084.jpg?type=w647",
"https://imgnews.pstatic.net/image/008/2022/06/21/0004761389_004_20220622041721618.jpg?type=w647",
"https://imgnews.pstatic.net/image/022/2022/06/22/20220621525500_20220622083207198.jpg?type=w647"
]
var body: some View {
//이미지 한개만 불러올때
// URLImage(url: "https://imgnews.pstatic.net/image/277/2022/06/21/0005106603_001_20220621171601527.jpg?type=w647").aspectRatio(contentMode: .fill)
//이미지 여러개를 리스트 형식으로 불러올때
List(self.posters, id:\.self){ poster in
URLImage(url: poster).aspectRatio(contentMode: .fit)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#2. ImageLoader
import Foundation
class ImageLoader: ObservableObject{
@Published var downloadedData : Data?
func downloadImage(url: String){
guard let imageURL = URL(string: url) else {
return
}
URLSession.shared.dataTask(with: imageURL){ data, _, error in
guard let data = data, error == nil else {
return
}
DispatchQueue.main.async{
self.downloadedData = data
}
}.resume()
}
}
#3. URLImage
import SwiftUI
struct URLImage: View {
let url : String
let placeholder: String
@ObservedObject var imageLoader = ImageLoader()
init(url: String, placeholder: String = "placeholder"){
self.url = url
self.placeholder = placeholder
self.imageLoader.downloadImage(url: self.url)
}
var body: some View {
if let data = self.imageLoader.downloadedData{
return Image(uiImage: UIImage(data:data)!).resizable()
} else {
return Image("placeholder").resizable()
}
}
}
struct URLImage_Previews: PreviewProvider {
static var previews: some View {
URLImage(url: "https://fyrafix.files.wordpress.com/2011/08/url-8.jpg")
}
}
리스트 형태로 여러개 이미지 불러오기 
이미지 한개만 불러오기 'SwiftUI 100 레시피 > Data Flow' 카테고리의 다른 글
SwiftUI Data Flow - @AppStorage 사용하기 (0) 2022.06.22 SwiftUI Data Flow - onReceive modifier를 사용한 Notifications (0) 2022.06.21 SwiftUI Data Flow - onChange modifier를 사용한 state changes (0) 2022.06.21 SwiftUI Data Flow - optional bindings을 취급하는 방법 (0) 2022.06.21 SwiftUI Data Flow - @EnvironmentObject를 사용하여 Global state 적용하기 (0) 2022.06.21
