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

I’m currently working on a SwiftUI project and using the Kingfisher library to display images. However, I’m facing an issue with showing an image using the KFImage view with a URL.

Here’s a simplified version of my code:

import SwiftUI
import Kingfisher

struct TopMoviePreview: View {
    var movie: Movie
    
    func isCategoryLast(_ cat: String) -> Bool {
        let catCount = movie.categories.count
        
        if let index = movie.categories.firstIndex(of: cat) {
            if index + 1 != catCount {
                return false
            }
        }
        
        return true
    }
    
    var body: some View {
        ZStack {
            KFImage(URL(string:"https://picsum.photos/seed/picsum/200/300")!)
                .resizable()
                .scaledToFill()
                .clipped()
            
            VStack {
                Spacer()
                
                HStack {
                    ForEach(movie.categories, id: \.self) { category in
                        
                        HStack {
                            Text(category)
                            .font(.footnote)
                            .foregroundColor(.black)
                            
                            if !isCategoryLast(category) {
                                Image(systemName: "circle.fill")
                                    .foregroundColor(.blue)
                                    .font(.system(size: 3))
                            }
                        }
                    }
                }
                
                HStack {
                    Spacer()
                    
                    SmallVerticalButton(text: "My List", isOnImage: "checkmark", isOffImage: "plus", isOn: true) {
                        //
                    }
                    
                    Spacer()
                    
                    WhiteButton(text: "Play", imageName: "play.fill") {
                        //
                    }
                    .frame(width: 120)
                    
                    Spacer()
                    
                    SmallVerticalButton(text: "Info", isOnImage: "info.circle", isOffImage: "info.circle", isOn: true) {
                        //
                    }
                    
                    Spacer()
                }
            }
            .background(
//                LinearGradient.blackOpacityGradient
//                    .padding(.top, 250)
            )
        }
        .foregroundColor(.white)
    }
}


#Preview {
    TopMoviePreview(movie: movie2)
}

The issue is that the image is not being displayed as expected. I have verified that the URL is correct, and if I replace it with a static image, it works fine. It seems to be related to the asynchronous loading of the image.

I have tried using different approaches, including checking if the URL is valid and force-unwrapping it, but the problem persists. The placeholder image is also not showing up.

Any insights or suggestions on what might be causing this issue and how I can resolve it would be greatly appreciated.

Thank you!