如何为AsyncImage添加ProgressView占位符及加载失败备用图？

这个问题我之前也踩过坑！你遇到的报错本质是误用了AsyncImage的构造器——它的两种初始化方式是互斥的：要么用带单独placeholder参数的版本，要么用接收AsyncImagePhase的闭包版本，不能同时混用这两种写法，这才导致编译器抛出了那个奇怪的诊断错误。

问题根源 #

你代码里同时用了接收AsyncImagePhase的content闭包，又额外加了placeholder参数，但SwiftUI的AsyncImage并没有同时支持这两者的构造器，编译器无法解析这种混合写法，所以出现了报错。

正确的实现方案 #

应该直接在AsyncImagePhase的闭包里处理三种状态：加载中（.empty）、加载成功（.success）、加载失败（.failure），这样就能同时实现加载时的ProgressView、成功时的图片、失败时的占位图。

修正后的完整代码：

var body: some View {
    AsyncImage(url: url, scale: scale ?? 1) { phase in
        switch phase {
        case .empty:
            // 加载中：显示ProgressView
            ProgressView()
                .progressViewStyle(.circular)
                .frame(width: width, height: height)
        case .success(let image):
            // 加载成功：显示目标图片
            image
                .resizable()
                .aspectRatio(contentMode: contentMode ?? .fit)
                .frame(width: width, height: height)
        case .failure(_):
            // 加载失败：显示错误占位图
            Image("placeholder_img")
                .resizable()
                .frame(width: 50, height: 50)
                .border(Color(.NeutralPalette5))
                .padding()
                .aspectRatio(contentMode: .fill)
                .frame(width: width, height: height)
        @unknown default:
            // 处理未来可能新增的状态
            Image("placeholder_img")
                .resizable()
                .frame(width: 50, height: 50)
                .border(Color(.NeutralPalette5))
                .padding()
                .aspectRatio(contentMode: .fill)
                .frame(width: width, height: height)
        }
    }
}

代码说明 #

• .empty：当图片还在加载、没有任何结果时，显示圆形ProgressView，并且用frame约束和目标图片一致的尺寸，避免布局跳动
• .success(let image)：加载成功后，渲染目标图片并应用你需要的样式
• .failure(_)：加载失败时，显示你指定的占位图，同样约束尺寸保持布局一致性
• @unknown default：为了兼容未来SwiftUI可能新增的Phase状态，做一个兜底处理

这样修改后，既能正常显示加载中的ProgressView，又能在失败时显示占位图，还不会触发编译器报错。

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