How to load an Image into a Uitableview?

Question

I performed a request that returned me some texts and urls with images, these images I need to load them along with the text in parallel in the table.

I am using Alamofire + Alamofireimage to load the texts/ Images, my doubt and the following, I must perform the process of inserting these elements in the table cell by the method cellForRowAtIndexPath ? why this event is triggered when it is started and when I go through the table, with this the images end up duplicating.

Example:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell")! as UITableViewCell
    print("Evento acontece")
    if self.verifyUrl(self.texto[indexPath.row]){

        Alamofire.request(.GET, self.texto[indexPath.row])
            .responseImage { response in

                if let image = response.result.value {
                    let size = CGSize(width: 300.00, height: 130.0)
                    let aspectScaledToFillImage = image.af_imageScaledToSize(size)
                    cell.imageView?.image = aspectScaledToFillImage
                }
        }

    }else{

        cell.textLabel?.text = self.texto[indexPath.row]
    }

    return cell
}

Note that besides being poorly aligned there is a text to the right of it, below and loaded the same images.

Answer 1

Step by step:

I must perform the process of inserting these elements in the cell of the table by method cellForRowAtIndexPath?

Most places where we find codes about UITableView use the method tableView:cellForRowAtIndexPath: to fill in the table data when in fact this method should return a reusable cell as soon as possible.

But where should I fill in my cell data? Answer: In the method tableView:willDisplayCell:forRowAtIndexPath: because as the documentation says this method is called before the cell (which has already been created in the cellForRowAtIndexPath) be drawn and shown on the screen.

I am using Alamofire + Alamofireimage to load the texts/Images

To load the contents of the texts I advise you to use the initial methods of your ViewController using a Array to save the returned content within the closure of the Alamofire.request to fill your array and give a tableView.reloadData() so the data would be ready at the time of formatting the cell.

How much images: using the AlamofireImage you load the images asynchronously using the method af_setImageWithURL(url)

In the end it would be more or less so that it would be:

if self.verifyUrl(self.texto[indexPath.row]){
   cell.imageView?.af_setImageWithURL(NSURL(string: self.texto[indexPath.row])!)
   // outras configurações da imagem....
}else{
   cell.textLabel?.text = self.texto[indexPath.row]
}

Note that besides being poorly aligned there is a text to the right of it, besides below and loaded the same images.

That’s very likely(say 99.99%) is the configuration of your cell in the storyboard specifically your constraints. Try to take a look at this another issue here from pt.stackoverflow 'cause it might help you in that part.