SwiftUI cannot have working rounded corners with AsyncImage and ultra-wide photos

I’m attempting to show a listing of photos from panoramic webcams with following show constraints:

• rounded corners
• 16/9 side ratio
• heart crop scale kind (picture is centered and cropped to fill accessible area whereas sustaining its personal side ratio)

following what I achieved in my Android app whereas nonetheless studying SwiftUI:

AsyncImage( // from Coil library
    mannequin = webcam.illustrationImageUrl,
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .aspectRatio(16 / 9f)
        .hazeSource(state = hazeState),
)

I attempted utilizing a mixture of resizable, scaledToFill, aspectRatio, clipped adopted by both clipToShape or background, however to no avail.

For example, this code:

AsyncImage(url: URL(string: webcam.illustrationImageUrl)) { picture in
    picture
        .resizable()
        .scaledToFill()
        .aspectRatio(16 / 9, contentMode: .match)
        .clipped()
        .clipShape(.rect(cornerRadius: 16))
} placeholder: {
    ProgressView()
}

will outcomes on this:

Clearly my rounding corners are in a large number:

• First picture: no rounded corners
• Second picture: clipped rounded corners
• Third picture: totally rounded corners

My understanding is as comply with: form clipping appears to use to the supply picture and never to what’s really seen (after scaling / cropping) or, the View (picture container) itself.

Why? As a result of the second picture reveals a little bit of its unique corners, which ends up in barely rounded corners whereas the second picture doesn’t show its unique nook resulting from a a lot bigger width with a lot content material left and proper out of the visible bounds. And in case you take the final picture, it’s correctly rounded, as a result of it’s displayed totally!

I additionally tried switching from scaledToFill to scaledToFit: all photos are correctly rounded as a result of they’re now totally displayed. However resulting from their various dimensions and unique side ratio, none respect my 16/9 side ratio constraint:

Lastly, I additionally tried wrapping the AsyncImage and even its underlying Picture in a ZStack to which I attempted each clipToShape and containerShape, however it doesn’t change something in any respect.

Why cannot I obtain the specified outcome? Thanks for the assistance!