SwiftUI跳转详情视图时图片无法加载问题求助

问题描述 #

我是Swift新手，实现列表选中跳转详情视图后，文本能正常显示，但图片加载失败。尝试使用Image(people.avatar ?? "")无效，预览中也看不到图片。

问题原因 #

Image(people.avatar ?? "")的写法错误：SwiftUI的Image初始化器接收字符串参数时，默认是读取本地Assets中的图片资源名，而people.avatar是网络图片的URL字符串，直接传入无法加载网络图片。你在列表单元格中已经实现了PeopleAsyncImageView组件来处理网络图片加载与缓存，详情视图应该复用这个成熟的组件。

解决方案 #

修改详情视图代码，复用已有的PeopleAsyncImageView组件加载网络图片，同时处理URL无效或为空的情况：

import SwiftUI

struct PeopleDetailsView: View {
    let people: PeopleData // 无需@State，仅接收传入的只读数据
    private let placeholderImage = Image("placeholder-image")
    
    var body: some View {
        VStack(alignment: .center, spacing: 16) {
            // 复用异步图片组件加载网络头像
            if let avatarUrlStr = people.avatar, let url = URL(string: avatarUrlStr) {
                PeopleAsyncImageView(url: url)
                    .frame(width: 200, height: 200)
                    .mask(RoundedRectangle(cornerRadius: 16))
            } else {
                // URL无效时显示占位图
                placeholderImage
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 200, height: 200)
            }
            
            Text("First Name - \(people.firstName)")
                .font(.title)
            Text("Last Name: \(people.lastName ?? "未填写")")
                .font(.headline)
            Text("Email: \(people.email ?? "未填写")")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
        .padding()
        .navigationTitle("Employee Details")
    }
}

struct PeopleDetailsView_Previews: PreviewProvider {
    static var previews: some View {
        PeopleDetailsView(people: Constants.previewPeopleObj)
    }
}

优化说明 #

1. 移除@State修饰符：people是从列表视图传递的只读数据，不需要状态管理，用let即可。
2. 复用已有组件：PeopleAsyncImageView已经封装了网络图片加载、缓存、加载中状态和错误占位逻辑，保证列表与详情页的图片加载行为一致。
3. 容错处理：增加URL有效性判断，避免空值或无效URL导致的异常。
4. 布局优化：调整间距、字体层级和导航标题，提升详情页的视觉体验。

原问题截图 #

应用列表截图 #

详情页问题截图 #

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