SDWebImageSwiftUI - Image Loading Issues with Placeholder

88 Views Asked by At

I'm currently in the process of developing an iOS app, utilizing SDWebImageSwiftUI for image loading and display. To manage dependencies, including the SDWebImageSwiftUI framework, I've integrated CocoaPods into my project.

Recently, I performed an update on the SDWebImageSwiftUI pod, transitioning from version 2.0.2 to version 2.2.4. However, this update has introduced some issues into my previously functional code.

I've encountered a specific issue related to the display of a placeholder while an image is loading. Below, I've provided relevant code snippets along with a description of the observed behavior.

struct StackedImagesView: View {
    @Binding var imageUrl1: String
    @Binding var imageUrl2: String
    
    @Binding var needsPlaceholder1: Bool
    @Binding var needsPlaceholder2: Bool
    
    @State private var stockImage: UIImage? = UIImage(named: "stockImage")
    
    var body: some View {
        ZStack {
            WebImage(url: URL(string: imageUrl1))
                .onSuccess { image, data, cacheType in
                    print("image 1 loaded")
                } // onSuccess
                .placeholder {
                    if needsPlaceholder1, let stockImage = stockImage {
                        Image(uiImage: stockImage)
                                .resizable()
                                .scaledToFit()
                    }
                } // placeholder
                .resizable()
                .scaledToFit()
            
            WebImage(url: URL(string: imageUrl2))
                .onSuccess { image, data, cacheType in
                    print("image 2 loaded")
                } // onSuccess
                .placeholder {
                    if needsPlaceholder2, let stockImage = stockImage {
                        Image(uiImage: stockImage)
                                .resizable()
                                .scaledToFit()
                    }
                } // placeholder
                .resizable()
                .scaledToFit()
        } // ZStack
    }
}

Let's run through an example:

  1. To start, we have the following: imageUrl1 = "", imageUrl2 = "", needsPlaceholder1 = false, and needsPlaceholder2 = false
  2. Image 1 is added, so imageUrl1 = "someValidUrl" and needsPlacedholder1 = true
  3. Image 1 loads and is displayed, we see that "image 1 loaded" has been printed
  4. Image 2 is added, and imageUrl2 = "someValidUrl" but needsPlacedholder2 = false still
  5. Image 1 is still displayed, but Image 2 does not load and "image 2 loaded" does not print

Here is another example:

  1. To start, we have the following: imageUrl1 = "", imageUrl2 = "", needsPlaceholder1 = false, and needsPlaceholder2 = false
  2. Image 2 is added, so imageUrl2 = "someValidUrl" and needsPlacedholder2 = true
  3. Image 2 loads and is displayed, we see that "image 2 loaded" has been printed

In regards to the first detailed scenario, any ideas as to why the second image won't load when there is no placeholder? If you have any insights or suggestions on how to address this issue and restore the intended functionality, I would greatly appreciate your input.

0

There are 0 best solutions below