SwiftUI：AsyncImage加载图片存入数组的实现及报错解决

错误原因 #

你遇到的Type '()' cannot conform to 'View'错误，是因为AsyncImage的content闭包要求必须返回一个View类型的值，但你在闭包开头写的self.images[index] = sourceImage是一个赋值语句，返回的是Void（即()），SwiftUI会将这个作为闭包的返回值，导致类型不匹配。

解决步骤 #

1. 初始化数组避免索引越界 #

首先要确保images数组的元素数量和outputImageArray一致，防止赋值时出现索引越界：

@State private var images: [Image?] = Array(repeating: nil, count: outputImageArray.count)

2. 转移赋值操作到合适位置 #

将赋值操作放到sourceImage的.onAppear修饰符中，这样既不会影响闭包返回View，又能在图片加载完成并显示时将其存入数组（可加判断避免重复赋值）。

修改后的完整代码 #

@State private var images: [Image?] = Array(repeating: nil, count: outputImageArray.count)
@State private var selectedImage: String?
@State private var isDefaultSelected = true
@State private var takenImageName: String = ""

var outputImageArray: [String] = ["https://replicate.delivery/pbxt/KJmFdQRQVDXGDVdVXftLvFrrvgOPXXRXbzIVEyExPYYOFPyF/80048a6e6586759dbcb529e74a9042ca.jpeg",
                                  "https://replicate.delivery/pbxt/KIIutO7jIleskKaWebhvurgBUlHR6M6KN7KHaMMWSt4OnVrF/musk_resize.jpeg",
                                  "https://replicate.delivery/pbxt/KI4a4NSCc0sAFMdlbD4n8ufHLXb2utKIwwbQff0M2ryhGJPJ/pp_0.jpg"
]

HStack {
    ForEach(Array(outputImageArray.enumerated()), id: \.element) { index, imageUrl in
        AsyncImage(url: URL(string: imageUrl)) { sourceImage in
            sourceImage
                .resizable()
                .frame(width: 70, height: 100)
                .aspectRatio(contentMode: .fill)
                .clipped()
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.gray, lineWidth: 1))
                .opacity(selectedImage != imageUrl ? 0.6 : 1.0)
                .onAppear {
                    // 仅在未存储时赋值，避免重复操作
                    if images[index] == nil {
                        images[index] = sourceImage
                    }
                }
        } placeholder: {
            ProgressView()
        }.onTapGesture {
            selectedImage = imageUrl
            isDefaultSelected = false
            print("taken image name tap", takenImageName)
            print("selectedImage", selectedImage ?? "")
        }
    }
}

补充说明 #

如果需要处理图片加载失败的情况，可以改用AsyncImage的完整初始化器（接收AsyncImagePhase参数），在.success分支中进行赋值操作，同时处理失败和加载中的状态：

AsyncImage(url: URL(string: imageUrl)) { phase in
    switch phase {
    case .success(let image):
        image
            .resizable()
            // ... 其他修饰符
            .onAppear {
                if images[index] == nil {
                    images[index] = image
                }
            }
    case .failure(_):
        Image(systemName: "photo.badge.exclamationmark")
            .resizable()
            .frame(width: 70, height: 100)
    case .empty:
        ProgressView()
    @unknown default:
        ProgressView()
    }
}

内容的提问来源于stack exchange，提问作者iosdev1111