SDWebImageSwiftUI如何在用户选择图片前显示默认占位图

• 空字符串构造URL会返回nil，WebImage接收到无效空地址时没有配置占位逻辑，直接出现空白
• 原判断逻辑只覆盖了「本地刚选中新头像」和「加载WebImage」两个分支，没有处理「无有效网络头像地址」的兜底场景
• 若ViewModel中userModel属性未加@Published标记，数据库拉取完用户数据后不会触发视图刷新
• 原代码存在括号闭合位置错误的语法问题，会导致布局异常

按照「本地临时选中头像 > 云端已存头像 > 预设占位图」的优先级展示，同时给图片组件配置兜底占位，修正语法问题：

• 构造URL前先校验头像地址字符串非空，避免生成无效空URL
• 利用SDWebImageSwiftUI的WebImage自带placeholder参数，配置默认占位图，覆盖加载中、加载失败、无有效URL的所有兜底场景
• 确保ViewModel的用户模型属性被@Published标记，保证数据更新时视图自动刷新
• 修正原代码中错位的闭合括号，修复布局结构

修正后的完整代码如下：

import SwiftUI
import Firebase
import FirebaseFirestore
import SDWebImageSwiftUI

struct ProfilePicture: View {
    @ObservedObject var vm = DashboardLogic()
    
    @State private var showingImagePicker = false
    @State private var inputImage: UIImage?
  
    var body: some View {
        ZStack (alignment: .topTrailing) {
            VStack {
                // 优先级1：本地刚选中未上传的头像
                if let inputImage = inputImage {
                    Image(uiImage: inputImage)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width:150, height: 150)
                        .clipShape(Circle())
                } else {
                    // 优先级2：云端已保存的头像，无效地址时自动展示占位
                    let avatarUrl = URL(string: vm.userModel?.profilePictureURL ?? "")
                    WebImage(url: avatarUrl)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width:150, height: 150)
                        .clipShape(Circle())
                        .placeholder {
                            // 优先级3：默认占位图，可替换为资产目录中的自定义占位图
                            Image(systemName: "person.crop.circle.fill")
                                .resizable()
                                .foregroundColor(.gray.opacity(0.3))
                                .frame(width: 150, height: 150)
                        }
                }
                    
                Button(action: {
                    showingImagePicker = true
                }){
                    Image(systemName: "plus.circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .foregroundColor(Color("ButtonTwo"))
                        .frame(width:30, height:25)
                        .contentShape(Rectangle())
                }
            }
            .sheet(isPresented: $showingImagePicker){
                EditorImagePicker(image: $inputImage)
            }
        }
        .onChange(of: inputImage) { _ in
            persistImageToStorage()
        }
    }
    
    // 头像上传存储逻辑
    private func persistImageToStorage() {
        // 原有上传逻辑保留，注意上传成功拿到Firebase返回的下载URL后
        // 必须在主线程更新 vm.userModel?.profilePictureURL 为新的下载地址
        // 保证后续视图不需要重新拉取数据库就能展示最新头像
    }
}

• 请检查DashboardLogic类，确保userModel属性使用@Published修饰，且类继承自ObservableObject，否则数据更新无法触发视图刷新
• 占位图可替换为项目资产目录中提前导入的自定义预设头像，替换Image(systemName:)为Image("你的占位图资源名")即可
• 头像上传成功后，除了更新数据库中的地址，一定要同步更新本地ViewModel中userModel的头像地址字段，避免上传完成后还展示旧图或占位图

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