SwiftUI中AsyncImage接收父视图传入URL却不显示图片问题

问题根因 #

• 现有AsyncImage实现仅处理了加载成功的分支，未覆盖加载失败、URL初始化无效的场景，出错后会直接展示空白视图
• 传入的图片URL字符串可能包含未编码的特殊字符（如空格、中文、特殊符号），直接传入URL(string:)会返回nil，导致加载失败
• 旧版NavigationLink的destination会在创建时就完成实例化，若你同时修改imageUrl和showImageDetail属性，可能出现时序问题，导致PostImageView初始化时拿到的是旧的URL值

修复方案 #

1. 首先改造PostImageView，增加URL编码逻辑和加载状态全分支处理，方便定位问题：

struct PostImageView: View {
  var postImage: String

  var body: some View {
      // 对URL字符串做编码兼容处理
      let processedUrlStr = postImage.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? postImage
      AsyncImage(url: URL(string: processedUrlStr)) { phase in
          switch phase {
          case .empty:
              // 加载中占位
              VStack(spacing: 8) {
                  Text("IMAGE URL: \(postImage)")
                  ProgressView()
              }
          case .success(let image):
              image
                  .resizable()
                  .aspectRatio(contentMode: .fit)
          case .failure(let error):
              // 加载失败提示，可按需修改样式
              VStack(spacing: 4) {
                  Text("图片加载失败")
                      .font(.headline)
                  Text("错误信息：\(error.localizedDescription)")
                      .font(.caption)
                  Text("原始URL：\(postImage)")
                      .font(.caption2)
              }
              .padding()
          @unknown default:
              EmptyView()
          }
      }
      .ignoresSafeArea()
  }
}

2. 修复跳转逻辑的时序问题：
   如果你项目最低支持iOS16+，推荐使用navigationDestination替代旧版NavigationLink，避免初始化时机导致的参数传递异常：

// 父视图中嵌套在NavigationStack内
.navigationDestination(isPresented: $imageDetail.showImageDetail) {
    PostImageView(postImage: imageDetail.imageUrl)
}

如果需要兼容iOS15及更早版本，调整触发跳转的属性赋值顺序，确保URL先赋值完成再触发跳转：

// 先赋值URL
imageDetail.imageUrl = "你的有效图片URL"
// 异步延迟修改展示状态，确保属性更新完成
DispatchQueue.main.async {
    imageDetail.showImageDetail = true
}

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