Показать изображение в списке из URL

Question

У меня есть список, который заполняется из 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()
}

3-я строка неверна, но это то, чего я пытаюсь достичь.

Теперь book.imagen - это переменная Decodable для всех URL-адресов изображений JSON. Как я могу это сделать?

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
}

Answer 1

Здесь Я нашел одно решение и изменил его для вас. Идея состоит в том, чтобы создать ImageView с классом ImageLoader :

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

Вот результат предварительного просмотра: