pass image to another view when clicked on tableview cell. The image is fetched from json data and initialised with alamofire

Question

i am fetching json data from url and displaying it in tableview. I want to image in tableview to another view controller when clicked on tableview cell. My another label are showing but dont know how to write code for image in didselectrowatindexpath method of tableview

my code:

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

    //getting hero for specified position
    let hero: Hero
    hero = heroes[indexPath.row]

    //displaying values
    cell.labelName.text = hero.name
    cell.labelTeam.text = hero.team
    cell.labelRealName.text = hero.realname
    cell.labelAppear.text = hero.firstappearance
    cell.labelPublish.text = hero.publisher

    //displaying image
    Alamofire.request(hero.imageUrl!).responseImage { (response) in
        debugPrint(response)

        if let image = response.result.value {
            cell.heroImage.image = image
        }
    }
    return cell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    let heroesDetails:HeroesDetailsViewController = self.storyboard?.instantiateViewController(withIdentifier: "HeroesDetailsViewController") as! HeroesDetailsViewController

    heroesDetails.strlabelTeam = heroes[indexPath.row].team
    heroesDetails.strlabelName = heroes[indexPath.row].name
    heroesDetails.strlabelAppear = heroes[indexPath.row].firstappearance
    heroesDetails.strlabelPublish = heroes[indexPath.row].publisher
    heroesDetails.strlabelRealName = heroes[indexPath.row].realname

    self.navigationController?.pushViewController(heroesDetails, animated: true)
}

my heroesdetailviewcontroller file where i want to display code:

import UIKit

class HeroesDetailsViewController: UIViewController {


    @IBOutlet weak var detailsImg: UIImageView!
    @IBOutlet weak var detailsName: UILabel!
    @IBOutlet weak var detailsRealName: UILabel!
    @IBOutlet weak var detailsTeam: UILabel!
    @IBOutlet weak var detailsAppear: UILabel!
    @IBOutlet weak var detailsPublisher: UILabel!

    var strheroImage: UIImage!
    var strlabelName: String!
    var strlabelTeam: String!
    var strlabelAppear: String!
    var strlabelPublish: String!
    var strlabelRealName: String!

    override func viewDidLoad() {
        super.viewDidLoad()

        detailsImg.image = strheroImage
        detailsName.text = strlabelName
        detailsRealName.text = strlabelRealName
        detailsTeam.text = strlabelTeam
        detailsAppear.text = strlabelAppear
        detailsPublisher.text = strlabelPublish


        // Do any additional setup after loading the view.
    }

}

my modal file:

class Hero{
    var name:String?
    var team:String?
    var imageUrl:String?
    var realname:String?
    var firstappearance:String?
    var publisher:String?

    init(name:String?, team:String?, imageUrl:String?, realname:String?, firstappearance:String?, publisher:String?) {
        self.name = name
        self.team = team
        self.imageUrl = imageUrl
        self.realname = realname
        self.firstappearance = firstappearance
        self.publisher = publisher
    }
}

my tableviewcell.swift file:

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var heroImage: UIImageView!
    @IBOutlet weak var labelName: UILabel!
    @IBOutlet weak var labelTeam: UILabel!
    @IBOutlet weak var labelAppear: UILabel!
    @IBOutlet weak var labelPublish: UILabel!
    @IBOutlet weak var labelRealName: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

my main viewcontroller.swift file which contains all code:

import UIKit
import Alamofire
import AlamofireImage

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{

    //MARK: IBOUTLETS
    @IBOutlet weak var tableviewHeroes: UITableView!

    // Web API Url
    let URL_GET_DATA = "https://simplifiedcoding.net/demos/marvel/"

    // List to store Heroes
    var heroes = [Hero]()

    //implementing uirefreshcontrol to tableview
    lazy var refreshControl: UIRefreshControl = {
        let refreshControl = UIRefreshControl()
        refreshControl.addTarget(self, action: #selector(ViewController.handleRefresh), for: .valueChanged)
        refreshControl.tintColor = UIColor.init(red: 217/255, green: 133/255, blue: 199/255, alpha: 1)
        return refreshControl
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.tableviewHeroes.addSubview(self.refreshControl)

        //fetching data from web api
        Alamofire.request(URL_GET_DATA).responseJSON { (response) in

            //getting json
            if let json = response.result.value {

                //converting json to NSArray
                let heroesArray:NSArray = json as! NSArray

                //traversing through all elements of the array
                for i in 0..<heroesArray.count {

                        //adding heroes value to hero list
                    self.heroes.append(Hero(
                        name: (heroesArray[i] as AnyObject).value(forKey: "name") as? String, team: (heroesArray[i] as AnyObject).value(forKey: "team") as? String, imageUrl: (heroesArray[i] as AnyObject).value(forKey: "imageurl") as? String,
                        realname: (heroesArray[i] as AnyObject).value(forKey: "realname") as? String, firstappearance: (heroesArray[i] as AnyObject).value(forKey: "firstappearance") as? String, publisher: (heroesArray[i] as AnyObject).value(forKey: "publisher") as? String ))
                }

                //display data in tableview
                self.tableviewHeroes.reloadData()

            }
        }
        self.tableviewHeroes.reloadData()
    }

    func handleRefresh(refreshControl: UIRefreshControl) {
        self.tableviewHeroes.reloadData()
        refreshControl.endRefreshing()

    }

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

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

        //getting hero for specified position
        let hero: Hero
        hero = heroes[indexPath.row]


        //displaying values
        cell.labelName.text = hero.name
        cell.labelTeam.text = hero.team
        cell.labelRealName.text = hero.realname
        cell.labelAppear.text = hero.firstappearance
        cell.labelPublish.text = hero.publisher

        //displaying image
        Alamofire.request(hero.imageUrl!).responseImage { (response) in
            debugPrint(response)

            if let image = response.result.value {
                cell.heroImage.image = image
            }
        }
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        let heroesDetails:HeroesDetailsViewController = self.storyboard?.instantiateViewController(withIdentifier: "HeroesDetailsViewController") as! HeroesDetailsViewController

        let hero: Hero
        hero = heroes[indexPath.row]

        let image : UIImage = UIImage(data: hero.imageUrl)

        heroesDetails.strlabelTeam = heroes[indexPath.row].team
        heroesDetails.strlabelName = heroes[indexPath.row].name
        heroesDetails.strlabelAppear = heroes[indexPath.row].firstappearance
        heroesDetails.strlabelPublish = heroes[indexPath.row].publisher
        heroesDetails.strlabelRealName = heroes[indexPath.row].realname
        heroesDetails.strheroImage = image

        self.navigationController?.pushViewController(heroesDetails, animated: true)
    }


}

Answer 1

You should use Caches policy instead of passing downloaded image from one VC to another. Larger image could take time to download, user can not wait for it before tapping the table view cell. For more details please see Image Cache Section https://github.com/Alamofire/AlamofireImage

Answer 2

In your didSelectRowAt indexPath function, before sending image to different viewController try to convert the data into image first, then send it:

First declare a global image variable:

var imageArray = [UIImage]()

Then assign the image you get from alamofireImage to this variable in your cellForRowAt indexPath function:

if let image = response.result.value {
        cell.heroImage.image = image
        self.imageArray.append(image)

    }

Then pass it :

heroesDetails.strlabelTeam = heroes[indexPath.row].team
heroesDetails.strlabelName = heroes[indexPath.row].name
heroesDetails.strlabelAppear = heroes[indexPath.row].firstappearance
heroesDetails.strlabelPublish = heroes[indexPath.row].publisher
heroesDetails.strlabelRealName = heroes[indexPath.row].realname

heroesDetails.strheroImage = self.imageArray[indexPath.row]

Answer 3

1st View Controller:

import UIKit
import Alamofire
import ObjectMapper

 var homeScreenData = [HomeDataModel]()

    func homeScreenDataAPI(){



        var params : Parameters?

        params =
            [ 
                "user_id" : id ?? 0,
            ]
        print(params as Any)

        self.view.makeToastActivity(.center)
        ApiCallWithHeader(url : “homeDataAPI” , params : params!) { responseObject, error in
            // use responseObject and error here
            print("responseObject = \(String(describing: responseObject)); error = \(String(describing: error))")

            let JSON = responseObject
            if(JSON?["status"] as? String == "success") {

                if let responseData = (JSON?["data"] as? [Dictionary<String, AnyObject>]) {

                    if let homeScreenDataValue = Mapper<HomeDataModel>().mapArray(JSONObject: responseData)
                    {

                      self.homeScreenData =  homeScreenDataValue   
                    }
                }  
            return

        }     

   func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {


        let vc = self.storyboard?.instantiateViewController(withIdentifier: "SecondViewController") as! SecondViewController
        vc.homeScreenData = homeScreenData
        vc.indexTagValue = indexPath.item
                self.navigationController?.pushViewController(vc, animated: true)
    }     

Second View Controller:-

            var homeScreenData = [HomeDataModel]()
            var indexTagValue = 0  

    extension HomeScreenDetailViewController : UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return homeScreenData.count
        }
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {


            let cell : HomeDataOtherCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "testCollectionViewCell", for: indexPath as IndexPath) as! testCollectionViewCell
        cell.nameLabel.text = homeScreenData[indexPath.item].name

if let image = homeScreenData[indexPath.item].user_image {

                if image.contains("https://") {
                    cell.userImageView.sd_setImage(with: URL(string: image ), placeholderImage: UIImage(named: "userIcon"))

                } else {
                    let userImage = ImageURL + image
                    // userImageView.image = UIImage(named: userImage )
                    let urlString = userImage.addingPercentEncoding(withAllowedCharacters: CharacterSet.urlQueryAllowed)
                    cell.userImageView.sd_setImage(with: URL(string: urlString ?? ""), placeholderImage: UIImage(named: "userIcon"))
                }
            } else {
                cell.userImageView.image = UIImage(named: "userIcon")
            }
        return cell
}

ImageURL in my app is

let ImageURL = "http://test/public/images/

Answer 4

It is recommended to pass the data model so that it can reduce a lot of unnecessary code

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cellid = "testCellID"
    var cell = tableView.dequeueReusableCell(withIdentifier: cellid)
    if cell==nil {
        cell = UITableViewCell(style: .subtitle, reuseIdentifier: cellid)
    }

    let hero: Hero
    hero = heroes[indexPath.row] as! Hero
    cell?.textLabel?.text = hero.name

    let url = URL(string: hero.imageUrl ?? "")
    let data = try! Data(contentsOf: url!)
    cell?.imageView?.image = UIImage(data: data)

    return cell!
}

 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let hero = heroes[indexPath.row] as! Hero
    let heroesDetails = HeroesDetailsViewController()
    heroesDetails.hero = hero
    self.navigationController?.pushViewController(heroesDetails, animated: true)
}

class HeroesDetailsViewController: UIViewController {

@IBOutlet weak var detailsImg: UIImageView!
var hero: Hero!


override func viewDidLoad() {
    super.viewDidLoad()

    let url = URL(string: hero.imageUrl ?? "")
    let data = try! Data(contentsOf: url!)
    self.detailsImg?.image = UIImage(data: data)
}

}