SwiftUI에서 목록을 표시할 때 이미지가 검은색으로 채워집니다.

SwiftUI로 리스트를 작성했을 때에 화상이 검게 채워져 버렸으므로 대응 방법의 각서입니다.

아래와 같은 이미지와 명칭만의 셀을 가지는 간단한 리스트를 정의합니다.

struct ContentView: View {
    var body: some View {
        VStack {
            List {
                ForEach(0..<2, id: \.self) { index in
                    Button(action: {
                        print("タップ")
                    }) {
                        SpotCell()
                    }
                }
            }
        }
    }
}

struct SpotCell: View {
    var body: some View {
        HStack(alignment: .top) {
            Spacer().frame(width: 20)
            VStack(alignment: .leading) {
                HStack(alignment: .top) {
                    VStack {
                        Spacer().frame(height: 16)
                        Image(uiImage: UIImage(named: "otaru")!)
                            .resizable()
                            .scaledToFill()
                            .frame(width: 60, height: 60)
                            .clipped()
                            .cornerRadius(4.0)
                        Spacer().frame(height: 16)
                    }
                    VStack(alignment: .leading) {
                        Spacer().frame(height: 16)
                        Text("小樽運河").font(.subheadline)
                        Spacer()
                    }
                }
            }
            Spacer()
        }
    }
}

여기 iOS14 이상에서 실행하면 문제없이 이미지가 표시되지만, iOS13의 실제 기기에서 실행하면 아래와 같이 이미지가 검게 채워져 버렸습니다.


iOS13 이하라면 Image를 정의할 때 .renderingMode(.original)를 붙여야 하는 것 같습니다.
아래와 같이 resizable의 뒤에 붙이는 것으로 이미지가 정상적으로 표시되었습니다.
※리스트 밖에 화상을 배치했을 경우는 .renderingMode를 붙이지 않아도 정상적으로 표시됩니다만, 리스트안에 화상을 배치하면 위와 같이 검게 칠해 버리는 것 같습니다.

Image(uiImage: UIImage(named: "otaru")!)
                            .resizable()
                            .renderingMode(.original)
                            .scaledToFill()
                            .frame(width: 60, height: 60)
                            .clipped()
                            .cornerRadius(4.0)