无法显示列表视图中的图像

问：

我有一个简单的 SwiftUI 购物车应用程序。在主视图应用程序中。我有产品宽度列表添加到购物车按钮。我希望当用户单击购物车按钮时，它应该添加商品属性，如图像、价格、名称等。当我单击添加到购物车按钮时，我只能显示文本字段，但图像字段无法添加到购物车视图中。

主要问题出在OrderView中。item.thumbnail 未显示图像。

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

这是我的订单类。

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)
            }
        }
    }
}

这是订单视图代码。

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")
        }
    }
}

下面是产品列表视图的屏幕截图。

这是购物车视图图像未显示的屏幕截图。

图像底部边缘不正确