SwiftUI购物车应用：OrderView无法显示商品图片问题求助

我开发了一个简易SwiftUI购物车应用：首页展示带“加入购物车”按钮的商品列表，点击按钮后商品的图片、价格、名称等应同步到购物车视图，但目前仅文本字段正常显示，购物车视图（OrderView）中无法加载商品图片，核心问题代码片段如下：

Image(item.thumbnail)
    .resizable()
    .frame(width: 100, height: 100)
    .clipShape(Circle())

相关代码 #

Order类 #

import SwiftUI

class Order: ObservableObject {
    
    @Published var product = [Product]()
    
    var total: Int {
        if product.count > 0 {
            return product.reduce(0) { $0 + $1.price }
        } else {
            return 0
        }
    }
    func add(item: Product) {
        product.append(item)
    }
    func remove(item: Product) {
        if let index = product.firstIndex(of: item) {
            product.remove(at: index)
        }
    }
}

商品列表首页核心代码 #

VStack {
    if viewModel.productLists.count > 0 && !viewModel.refreshing {
        List(viewModel.productList, id: \.self) { product in
            ProductListViewCell(productData: product)
            
        } .listStyle(.grouped)
    }
}

ProductListViewCell #

struct ProductListViewCell: View {
    
    let productData: Product
    @EnvironmentObject var order: Order
    
    var body: some View {
        HStack {
            if let url = URL(string: productData.thumbnail) {
                ProductAsyncImageView(url: url)
                    .frame(width: 150, height: 150)
                    .mask(RoundedRectangle(cornerRadius: 16))
            }
            VStack(alignment: .leading,spacing: 5) {
                Text("Name: " +  (productData.title))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .font(.headline)
                
                Text("Description: " + (productData.description))
                    .frame(maxWidth: .infinity, alignment: .leading)
                
                
                Text("Price: £" + String(productData.price))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .font(.subheadline)
                
                Button {
                    order.add(item: productData)
                    
                } label: {
                    HStack {
                        Image(systemName: "cart.badge.plus")
                        
                        Text("Add to Cart")
                            .fontWeight(.semibold)
                    }
                    .foregroundColor(.white)
                    .frame(width: 150 , height: 40)
                    
                }
                .background(Color(.systemBlue))
                .cornerRadius(10)
            }
        }
    }
}

OrderView（问题所在视图） #

import SwiftUI

struct OrderView: View {
    @EnvironmentObject var order: Order
    
    var body: some View {
        NavigationStack {
            List {
                Section {
                    ForEach(order.product) { item in
                        HStack {
                            Image(item.thumbnail)
                                .resizable()
                                .frame(width: 100, height: 100)
                                .clipShape(Circle())
                            
                            VStack {
                                Text(item.title)
                                Text("£\(item.price) | \(item.discountPercentage)")
                                Button("Show details") {
                                    
                                }.foregroundColor(.gray)
                            }
                        }
                    }
                }
                
                Section {
                    NavigationLink("Place Order") {
                        Text("Check out")
                    }
                }
            }
            .navigationTitle("Order")
        }
    }
}

问题截图 #

• 商品列表视图（图片正常加载）：
  

• 购物车视图（图片未显示）：
  

• 图片底部边缘异常（额外问题）：
  

问题原因与解决方案 #

核心问题原因 #

Image(item.thumbnail) 是加载本地资源图片的API，而你的商品图片是网络URL（从ProductListViewCell使用ProductAsyncImageView加载网络URL可看出），直接用该初始化方法无法加载网络图片，导致购物车中图片不显示。

解决方法 #

在OrderView中复用已实现的ProductAsyncImageView加载网络图片，替换原Image(item.thumbnail)代码：

修改后的OrderView图片加载部分：

if let url = URL(string: item.thumbnail) {
    ProductAsyncImageView(url: url)
        .frame(width: 100, height: 100)
        .clipShape(Circle())
}

完整修改后的OrderView代码：

import SwiftUI

struct OrderView: View {
    @EnvironmentObject var order: Order
    
    var body: some View {
        NavigationStack {
            List {
                Section {
                    ForEach(order.product) { item in
                        HStack {
                            if let url = URL(string: item.thumbnail) {
                                ProductAsyncImageView(url: url)
                                    .frame(width: 100, height: 100)
                                    .clipShape(Circle())
                            }
                            
                            VStack {
                                Text(item.title)
                                Text("£\(item.price) | \(item.discountPercentage)")
                                Button("Show details") {
                                    
                                }.foregroundColor(.gray)
                            }
                        }
                    }
                }
                
                Section {
                    NavigationLink("Place Order") {
                        Text("Check out")
                    }
                }
            }
            .navigationTitle("Order")
        }
    }
}

额外问题：图片底部边缘异常 #

该问题出现在商品列表的ProductAsyncImageView上，是因为未设置图片缩放模式导致拉伸变形。给ProductAsyncImageView添加缩放修饰符即可修复：

修改ProductListViewCell中的图片代码：

ProductAsyncImageView(url: url)
    .frame(width: 150, height: 150)
    .scaledToFill() // 或scaledToFit()，按需选择
    .mask(RoundedRectangle(cornerRadius: 16))
    .clipped() // 确保图片不超出mask范围

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