Having trouble displaying KFImage with URL in SwiftUI - Kingfisher

Question

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!

update the preview it does not show any Image

Answer 1

This issue is not about KFImage, it's about your layout. Since your content view is ZStack, it will automatically fill the entire screen or superView. You're also putting VStack above KFImage. This VStack frame height is overwhelming the entire screen, with .background, it will cover KFImage. Try to comment out .background and you will see KFImage appear.