Swiftui 从URL在列表中显示图像

我有一个从JSON API填充的列表

ForEach(booksVM.books.sorted { $0.popularidad > $1.popularidad}) { book in
    HStack {
        Image(URL: book.imagen)
        Text(book.nombre)
        Spacer()
    }
    Text(book.autor)
    Spacer()
}

第三行是错误的，但这正是我想要达到的

现在，

book.imagen

是JSON的所有图像URL的可解码变量。我该怎么做

JSON以防万一：

[
{
    "id": 1,
    "nombre": "The design of every day things",
    "autor": "Don Norman",
    "disponibilidad": true,
    "popularidad": 70,
    "imagen": "https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg"
},
{
    "id": 2,
    "nombre": "100 años de soledad",
    "autor": "Garcia Marquez",
    "disponibilidad": false,
    "popularidad": 43,
    "imagen": "https://images-na.ssl-images-amazon.com/images/I/51egIZUl88L._SX336_BO1,204,203,200_.jpg"
}
]

和结构：

struct Book: Identifiable, Decodable {
    let id: Int
    let nombre: String
    let autor: String
    let disponibilidad: Bool
    let popularidad: Int
    let imagen: String
}

我找到了一个决定，并为你修改了它。想法是使用类ImageLoader创建ImageView：

struct ImageView: View {
    @ObservedObject var imageLoader:ImageLoader
    @State var image:UIImage = UIImage()

    func imageFromData(_ data:Data) -> UIImage {
        UIImage(data: data) ?? UIImage()
    }

    init(withURL url:String) {
        imageLoader = ImageLoader(urlString:url)
    }

    var body: some View {
        VStack {

            Image(uiImage: imageLoader.data != nil ? UIImage(data:imageLoader.data!)! : UIImage())
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:100, height:100)
        }
    }

}

class ImageLoader: ObservableObject {
    @Published var dataIsValid = false
    var data:Data?

    init(urlString:String) {
        guard let url = URL(string: urlString) else { return }
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data else { return }
            DispatchQueue.main.async {
                self.dataIsValid = true
                self.data = data
            }
        }
        task.resume()
    }
}

现在，您可以将其用于您的列表：

struct ListView: View {
    let urls = ["https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg", "https://images-na.ssl-images-amazon.com/images/I/51egIZUl88L._SX336_BO1,204,203,200_.jpg"]

    var body: some View {
        List {
            ForEach(urls, id: \.self) { url in
                ImageView(withURL: url)
            }
        }
    }
}

以下是预览结果：

---

这是否回答了您的问题？有点，装载机是唯一的方法吗？难道没有更简单的方法吗？你必须下载数据-否则你会怎么做？哇！非常感谢你！在列表部分有一个简单的问题，我如何将ForEach的功能添加到我之前的功能中，我尝试使用

ImageView（带URL:book.imagen）

，但不起作用。@luwec，很难理解你犯了什么错误？你是说实时预览还是其他什么？我已经有了一个ForEach，你的解决方案添加了另一个ForEach，这将创建另一个列表，我需要将你的ForEach与我的ForEach合并。@luwec，你需要这样的东西吗

ForEach（books）{book in

VStack{

HStack{

ImageView（带URL:book.imagen）

Text（book.nombre）

文本（book.autor）
Spacer（）
}
}