How to Resize Placeholder in Kingfisher where loading icon is in the middle

Question

Created Oct ’22

Replies 2

Boosts 0

Views 1.2k

Participants 2

Hi. Please see screenshot. Currently the icon placeholder is small. What I am trying to replicate is to have an area (the one in red) where the place holder icon is in the middle horizontally and vertically.

That same red area is where the downloaded image will be drawn. I think the term for this is aspect ratio if i am not mistaken? That the height should be proportionate based on the width.

I am using Kingfisher to load the image. This is what I have.

KFImage.url(URL(string: ""))
            .placeholder {
              HStack {
                Image(systemName: "photo")
                  .resizable()
                  .frame(width: 50, alignment: .center)
                   
                  .background(.red)
              }
              .background(.yellow)
              .scaledToFit()
            }
            .fade(duration: 0.25)
            .onFailure { error in print("Load image error : \(error) = \(earthquakeDetail.imgUrl)")
            }
            .resizable()
            .aspectRatio(contentMode: .fill)

Based on the screenshot image, the area for HStack is so thin with its height being small. My goal is to create an area like the one in red border.

Thoughts?

Boost

Answer 1

Claude31 OP

Oct ’22

It is hard to understand what you get and what you want. We just see big yellow marks, a quasi invisible red border, no way to understand what part of screen the code refers to…

In a word, your post does not help to help you.

Did you test the exact same code but not with a KF url, to see if the problem comes from KF ?

0

Answer 2

chitgoks OP

Oct ’22

Hi @Claude31 hmm now that you mention it. Could be possible this might be KF's doing. I cleaned the image for better understanding

The yellow border is the area where the placeholder is. But when the image is loaded, it is not equal. There are still extra spaces at the bottom. I tried both .fit and .fill but the result is the same.

Could it be the yellow area is correct. that the height is adjusted based on the aspect ratio of the width? And that KF is the culprit displaying the downloaded image not fitting it to the area the placeholder was occupying?

0