如何在Swift中的tableview的自定义单元格上显示JSON图像?

时间:2019-05-17 10:05:14

标签: ios swift xcode

我是编码的新手,学习如何将JSON图像解析为表格视图 能够显示标签,但不能显示图像文件。如何显示呢?我使用了下面给出的代码,请检查一下。

import UIKit

class ViewController: UIViewController, UITableViewDelegate,UITableViewDataSource {

    var dataArray = [[String:AnyObject]]()

    @IBOutlet weak var myTable: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "https://jsonplaceholder.typicode.com/photos")! //change the url
        let session = URLSession.shared
        var request = URLRequest(url: url)
        request.httpMethod = "GET" //set http method as POST
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")
        let task = session.dataTask(with: request as URLRequest, completionHandler: { data, response, error in
            guard error == nil else {
                return
            }

            guard let data = data else {
                return
            }

            do {
                if let json = try JSONSerialization.jsonObject(with: data, options: .mutableContainers) as? [[String:Any]] {

                    self.dataArray = json as [[String : AnyObject]]
                    DispatchQueue.main.async {
                        self.myTable.reloadData()
                    }
                    print(json)
                }
            } catch let error {
                print(error.localizedDescription)
            }
        })
        task.resume()
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArray.count
    }

    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return 250
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 250
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "id") as! ModTableViewCell
        cell.labout.text = String(describing: dataArray[indexPath.row]["id"]!)
        cell.imagethum.image = UIImage(named :dataArray[indexPath.row]["thumbnailUrl"]! as! String)
        return cell
    }
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let vc = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "story") as? FinalViewController
        var selectedindex = indexPath.row
        vc?.jarray = dataArray
        vc?.selectedindex1 = selectedindex
        self.navigationController?.pushViewController(vc!, animated: true)
    }
}

3 个答案:

答案 0 :(得分:0)

您需要使用thumbnailUrl响应中得到的String JSON下载图像。

用以下代码替换cellForRowAt方法的实现:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "id") as! ModTableViewCell
    cell.labout.text = String(describing: dataArray[indexPath.row]["id"] ?? "")
    if let urlString = dataArray[indexPath.row]["thumbnailUrl"] as? String, let url = URL(string: urlString) {
        URLSession.shared.dataTask(with: url) { (data, urlResponse, error) in
            if let data = data {
                cell.imagethum.image = UIImage(data: data)
            }
        }.resume()
    }
    return cell
}

此外,请勿广泛使用forced unwrapping (!)。可能会导致不必要地导致应用崩溃。

答案 1 :(得分:0)

您首先需要下载图像。 基本解决方案是:

    if let url = URL(string: "YOUR_URL") {
         if let data = try? Data(contentsOf: url) {
              cell.imagethum.image = UIImage(data: data)
         }
    }

有关更高级的解决方案,请查看SDWebImage框架(例如),它是初学者友好的。

答案 2 :(得分:0)

您可以尝试this

我们使用此SDWebImage窗格从URL加载图像。该Pod为异步图片下载器提供了缓存支持。

SDWebImage示例如下

 let img1 = savedInspofflineData[indexPath.row].image1
 if img1 == ""{
        //Error        
  }else{
      let imageUrl = URL(string: img1!)!
      cell.img1.sd_setImage(with: imageUrl, placeholderImage: UIImage(named: "logo_grey"), options: .refreshCached, completed: nil)

}