Unable to display the Image from List view

Question

I have an simple SwiftUI shopping car app. In the home view app. I have list of product width add to cart button. I am expecting when user click the cart button it should add the items properties like image, price, name etc. I am only able to display the text filed but the image filed not adding into cart view when I click the add to cart button.

Main problem is here into OrderView. The item.thumbnail is not displaying the image.

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

Here is my order class.

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

Here is my Home (Product list View ) view. This is the main code but I can add the entire code if it required.

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

Here is the ProductListViewCell code.

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

Here is the Order view code.

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

Here is the screenshot of the product list view.

Here is the screenshot of the cart view image is not displaying.

The image bottom edged is not correct

Answer 1

There seems to be a problem with item.thumbnail. This part can be debugged first. The image can be displayed in the ProductListViewCell file, but it cannot be displayed in the OrderView file. Check the code and update pls.

Maybe you can update OrderView:

import SwiftUI
struct OrderView: View {
@EnvironmentObject var order: Order
  var body: some View {
    NavigationView {
      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(alignment: .leading) {
                Text(item.title)
                  .font(.headline)
                Text("£\(item.price) | \(item.discountPercentage)")
                  .font(.subheadline)
                Button("Show details") {
                  // actions
                }
                .foregroundColor(.gray)
              }
            }
          }
        }
        Section {
          NavigationLink("Place Order") {
            Text("Check out")
          }
        }
      }
      .navigationTitle("Order")
    }
  }
}