How to hide a KFImage when image loading fails?

[NoahKnudsen]

I am trying to achieve a layout whereby an image will be full width when it successfully loads and take up no space whatsoever when it fails. It's turned out to be tricker than I imagined.

Here is the basic setup. This code fails to load an image, and then produces a large red-bordered square as opposed to taking up no space.

KFImage(URL(string: "https://not-an-image.xzy")!)
        .resizable()
        .scaledToFit()
        .frame(maxWidth: .infinity)
        .border(Color.red, width: 1)

I believe that KFImage is using an empty square image in the event of a failure, meaning that when I set scaledToFit and maxWidth: .infinity I end up with a big empty space in the layout.

I have tried adding the modifier onFailureImage(nil), and I have tried doing the scaling & resizing inside contentConfigure but it has no effect. The latter, contentConfigure, always receives a non-optional Image anyway so that scuppers that idea!

The only working solution I have come up with is to keep some additional local state in my view to manually hide the if it fails:

@State private var success = true

if imageSuccess {
    KFImage(URL(string: "https://not-an-image.xzy/")!)
        .onSuccess{_ in success = true }
        .onFailure{_ in success = false }
        .resizable()
        .scaledToFit()
        .frame(maxWidth: .infinity)
        .border(Color.red, width: 1)
}

Is there a cleaner solution to this problem?

[onevcat]

When loading fails, Kingfisher uses a Color.clear as a "placeholder" (if not explicitly set) and it takes the available space by default. I would suggest you give it a zero frame when loading fails, since it is in fact hard to determine a general-satisfied behavior for everyone...