Swiftui 是否已加载图像但未显示？

我正在尝试使用翠鸟SDK显示远程图像，图像已加载但未显示

    import SwiftUI
    import Kingfisher
    
    
    struct Tab_Home: View {
        
        
        //Slider
        @State var sliderIndex:Int = 0
        //Search bar
        @State var search:String = ""
        @ObservedObject var API = REST_API()
        
        var body: some View {
            
            VStack{
                
                ZStack{
                    
                    Group{
                        Rectangle().foregroundColor(Color.white.opacity(0.1))
                                   .cornerRadius(22.5)
                        
                        HStack(spacing : 0){
                            
                            Image(systemName: "magnifyingglass")
                                .resizable()
                                .frame(width : 20 , height : 20)
                                .aspectRatio(contentMode: .fit)
                                .foregroundColor(Color.white)
                                .padding(.leading , 10)
                            
                            TextFieldPro(placeholder : Text("Search").foregroundColor(.white), text: $search)
                                     .padding(.leading , 10)
                                     .padding(.trailing , 15)
                                     .frame( height : 45)
                                     .foregroundColor(Color.white)
                        }
                      
                    }.padding(.leading , 10)
                     .padding(.trailing , 10)
                     .padding(.bottom , 5)
                     .padding(.top , 15)
                    
                }.frame(height : 65)
                 .background(Color(hex: "#CC2323"))
             
                 Spacer()
                
                ScrollView{
                    
                   TabView(selection : $sliderIndex){
                        ForEach(Env.sharedInstance.settings.sliders , id : \.self){ slider in
                           SliderBite( data: slider).frame(width :UIScreen.main.bounds.width )
                        }
                      } .tabViewStyle(PageTabViewStyle())
                    
                    
                }
                .padding(.top , 10)
                .onAppear(){
                    API.checkin()
                }
                
            }
           
        }
    }
    
    struct Tab_Home_Previews: PreviewProvider {
        static var previews: some View {
            Tab_Home()
        }
    }
    
struct SliderBite: View {
 
    let data:DTO_SLIDER
    var body: some View {
      
        Group{
            if data.full_image != nil {
                KFImage(URL(string: data.full_image!)!)
                .fade(duration: 0.25)
                .onProgress { receivedSize, totalSize in  }
                .onSuccess { _ in print("Image loaded") }
                .onFailure { error in print("Load image error : \(error)") }
                .frame(width :UIScreen.main.bounds.width , height : 200)
                .aspectRatio(contentMode: .fill)
                .background(Color.black)
            }
        }.clipped()
    }
}

//Decoded from rest API

    struct DTO_SLIDER:Decodable,Hashable{
        var full_image:String?
    }

---

我错过了什么？

问题不在于KFImage，它正在按预期加载，而在于TabView不知何故不知道图像已加载，需要重新渲染，但可以轻松解决：

存储URL以显示在数组中，然后在选项卡视图中使用ForEach-这足以使图像在加载后显示：

struct TabHome: View {
    
    @State var search: String = ""
    let urls = [
        "https://www.broadway.org.uk/sites/default/files/styles/banner_crop/public/2019-10/star-wars-the-rise-of-skywalker-banner-min.jpg?h=639d4ef1&itok=z4KZ-3Tt",
        "https://www.broadway.org.uk/sites/default/files/styles/banner_crop/public/2019-11/star-wars-quiz-banner-min.jpg?h=f75da074&itok=bFe6rBe_"]
    
    var body: some View {
        VStack(spacing : 15) {
            HStack(spacing : 10) {
                Image(systemName: "magnifyingglass")
                    .resizable()
                    .frame(width: 20, height: 20)
                TextField("Search", text: $search)
                    .frame(height: 45)
            }
            .padding(.horizontal)
            .background(
                RoundedRectangle(cornerRadius: 22.5)
                    .foregroundColor(Color.gray.opacity(0.1))
                )
            .padding()
            
            ScrollView{
                TabView {
                    ForEach(urls, id: \.self) { url in
                        SliderBite(url: url)
                    }
                }   .tabViewStyle(PageTabViewStyle())
                
            }
        }
    }
}

您可能还希望使您的KFImage可调整大小：

struct SliderBite: View {
    
    let url: String
    
    var body: some View {
        KFImage(URL(string: url)!)
            .resizable()
            .fade(duration: 0.25)
            .aspectRatio(contentMode: .fill)
            .frame(height : 200)
            .background(Color.black)
    }
    
}

解决显示来自相同url的图像的问题

如果您这样声明DTO_滑块：

struct DTO_SLIDER: Decodable, Identifiable {
    
    let full_image: String?
    let id = UUID()
}

它将确保每一个都是唯一的，即使它具有相同的完整图像。 这也意味着你可以这样使用它：

ForEach(Env.sharedInstance.settings.sliders) { slider in
    //...
}

---

是否有可能提供一个可复制的示例？你的代码依赖于大量不存在的代码（

API

，

SliderBite

，

TextFieldPro

，等等），我相信你的解决方案是有效的，但是当我在图像之间交换时，白色的分页点没有切换，我应该手动执行此操作。你是否使用了我回答中的两个不同URL？如果您使用的是两个相同的url，那么它们具有相同的标识，因此点不起作用。我使用哈希协议为每个url信息创建了一个类

struct DTO_SLIDER:Decodable，Hashable{var full_image:String？}

，然后像u did一样创建循环。您可以共享它吗？如何识别它？我已经用新的代码修改更新了这个问题