iOS Development

ios – Having hassle displaying KFImage with URL in SwiftUI – Kingfisher

Spread the love


I am at the moment engaged on a SwiftUI challenge and utilizing the Kingfisher library to show pictures. Nevertheless, I am going through a problem with displaying a picture utilizing the KFImage view with a URL.

This is a simplified model of my code:

import SwiftUI
import Kingfisher

struct TopMoviePreview: View {
    var film: Film
    
    func isCategoryLast(_ cat: String) -> Bool {
        let catCount = film.classes.depend
        
        if let index = film.classes.firstIndex(of: cat) {
            if index + 1 != catCount {
                return false
            }
        }
        
        return true
    }
    
    var physique: some View {
        ZStack {
            KFImage(URL(string:"https://picsum.images/seed/picsum/200/300")!)
                .resizable()
                .scaledToFill()
                .clipped()
            
            VStack {
                Spacer()
                
                HStack {
                    ForEach(film.classes, id: .self) { class in
                        
                        HStack {
                            Textual content(class)
                            .font(.footnote)
                            .foregroundColor(.black)
                            
                            if !isCategoryLast(class) {
                                Picture(systemName: "circle.fill")
                                    .foregroundColor(.blue)
                                    .font(.system(measurement: 3))
                            }
                        }
                    }
                }
                
                HStack {
                    Spacer()
                    
                    SmallVerticalButton(textual content: "My Checklist", isOnImage: "checkmark", isOffImage: "plus", isOn: true) {
                        //
                    }
                    
                    Spacer()
                    
                    WhiteButton(textual content: "Play", imageName: "play.fill") {
                        //
                    }
                    .body(width: 120)
                    
                    Spacer()
                    
                    SmallVerticalButton(textual content: "Data", isOnImage: "information.circle", isOffImage: "information.circle", isOn: true) {
                        //
                    }
                    
                    Spacer()
                }
            }
            .background(
//                LinearGradient.blackOpacityGradient
//                    .padding(.prime, 250)
            )
        }
        .foregroundColor(.white)
    }
}


#Preview {
    TopMoviePreview(film: movie2)
}

The problem is that the picture shouldn’t be being displayed as anticipated. I’ve verified that the URL is appropriate, and if I change it with a static picture, it really works high-quality. It appears to be associated to the asynchronous loading of the picture.

I’ve tried utilizing completely different approaches, together with checking if the URL is legitimate and force-unwrapping it, however the issue persists. The placeholder picture can also be not displaying up.

Any insights or options on what may be inflicting this situation and the way I can resolve it might be vastly appreciated.

Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *