swift - 图像未加载到 swiftui collectionview

Question

我正在尝试加载图像，但图像未加载。
我设置了我的图像加载器

class ImageLoader: ObservableObject {
@Published var image: UIImage?
private let url: URL
private var cancellable: AnyCancellable?

init(url: URL) {
    self.url = url
}

 deinit {
       cancellable?.cancel()
   }

   func load() {
       cancellable = URLSession.shared.dataTaskPublisher(for: url)
           .map { UIImage(data: $0.data) }
           .replaceError(with: nil)
           .receive(on: DispatchQueue.main)
           .assign(to: \.image, on: self)
   }
   
   func cancel() {
       cancellable?.cancel()
   }
 }

然后是 AsyncImage 结构

struct AsyncImage<Placeholder: View>: View {
@ObservedObject private var loader: ImageLoader
private let placeholder: Placeholder?

init(url: URL, placeholder: Placeholder? = nil) {
    loader = ImageLoader(url: url)
    self.placeholder = placeholder
}

var body: some View {
    image
        .onAppear(perform: loader.load)
        .onDisappear(perform: loader.cancel)
}

private var image: some View {
    placeholder
}
}





struct ProductSearhView: View {
 @ObservedObject var model: SearchResultViewModel
var body: some View{
    NavigationView {
         List {
                ForEach(0 ..< Global.productArry.count) { value in
                     CollectionView(model: self.model, data: Global.productArry[value])
                }
                
         }.navigationBarTitle("CollectionView")
    }


 }

}



struct CollectionView: View {
 @ObservedObject var model: SearchResultViewModel

let data: Product
    var body: some View {
        VStack {
            HStack {
                 
                Spacer()
                    AsyncImage(url: URL(string: self.data.productImageUrl)!, placeholder: Text("Loading ...")
                    ).aspectRatio(contentMode: .fit)
                Spacer()
               
            }
            HStack {
                Spacer()
                Text(self.data.name)
                Spacer()
                
                 }
        }.onAppear(perform:thisVal)
     }

func thisVal (){
    
    print(self.data.productImageUrl)
    // https://i5.walmartimages.com/asr/113d660f-8b57-4ab8-8cfa-a94f11b121aa_1.f6bad4b281983e164dcf0a160571e886.jpeg?odnHeight=180&odnWidth=180&odnBg=ffffff
    
}
}

除了图像加载外，其他一切都很好。图像仅显示占位符而不显示图像。
要加载的示例图片网址是这个
https://i5.walmartimages.com/asr/113d660f-8b57-4ab8-8cfa-a94f11b121aa_1.f6bad4b281983e164dcf0a160571e886.jpeg?odnHeight=180&odnWidth=180&odnBg=ffffff
我究竟做错了什么？

Answer 1

看起来您缺少图像。
你在哪里:

private var image: some View {
    placeholder
}

你只会有一个占位符。
如果您将其更改为:

private var image: some View {
    Group {
        if loader.image != nil {
            Image(uiImage: loader.image!)
                .resizable()
        } else {
            placeholder
        }
    }
}

这应该意味着如果 ImageLoader已成功加载图像，它将显示 Image使用加载的uiImage，否则它将显示占位符。