如何正确管理JSON提供的图像

Question

I'm trying to parse all the Image provided by downloaded JSON on my App. So, I've heard many ways to do that correctly. Which API should I used to manage the Images on my App? How should I do that, can I have an example?

I also wanted to take care correctly of delays between:

Run the app --> Load data --> Populate UI elements

What should I do to minimize this delay, I think a professional app shouldn't take that long to load all components.

That's the part where I'll populate a UITableView with Images.

var arrCerveja = [Cerveja]()

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!

    //TableView DataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return arrCerveja.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cellID") as! TableViewCell

        let model = arrCerveja[indexPath.row]

            cell.labelName.text = model.name
            cell.labelDetail.text = "\(model.abv)"
            cell. imageViewCell.image = ???? //How should I do that? 
        return cell
    }
    //TableView Delegate
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    }



    override func viewDidLoad() {
        super.viewDidLoad()
        getApiData { (cerveja) in
           arrCerveja = cerveja
           self.tableView.reloadData()
        }

    }

Model Folder:

import Foundation
struct Cerveja:Decodable{
    let name:String
    let abv:Double
    let image_url:String
}

Networking Folder:

import Alamofire


func getApiData(completion: @escaping ([Cerveja]) -> ()){
    guard let urlString = URL(string: "https://api.punkapi.com/v2/beers") else {
        print("URL Error")
        return
    }
    Alamofire.request(urlString).responseJSON { response in

        if response.data == response.data{
            do{
                let decoder = try JSONDecoder().decode([Cerveja].self, from: response.data!)

                completion(decoder)
            }catch{
        print(error)
            }
        }else{print("API Response is Empty")}

        }
}

Answer 1

What you can do is to cache the downloaded images, many libraries exist to help you do that, here is a list of some of them:

• Kingfisher
• HanekeSwift
• Cache

Kingfisher is a good one that also allow you to download the images and explain you how to use the library with table views. Caching the images will also reduce the loading time the next time the app is open. You can also use this library to display a user friendly loading to the user during loading.