Swift tableview image from URL not showing until cell is selected

Question

I'm iterating through an array of URLs in order to display images in my tableview cells. For some reason the images will not display until the cell is selected. Only one image will show at a time, so when I select on one cell to display the image, it will disappear again once I select another cell. I'm not sure what the issue is because the text shows up with no issues:

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "resultCell", for: indexPath) as! ResultsTableViewCell
   var place = [String]()
    var img = [String]()

    if imageUrls.count == venueIds.count {
        for (key,value) in restaurantInfo {
            place.append(value[0])
            img.append(value[1])
        }
            let search = img[indexPath.row]
            Alamofire.request(search).responseImage { response in
                if let image = response.value {
                    cell.imageSelection.image = image
                }
                else{
                    print(response.result.error!)
                }
        }
        cell.newLabel.text = place[indexPath.row]
    }
    return cell
}

Answer 1

Hey you should not call web service from the cellForRowAt method ideally, instead prepare a model for your table and fetch the data beforehand.

Or

Also image fetching can be done asynchronously, so that your table's scroll don't get laggy and images display correctly.

DispatchQueue.main.async {}

Answer 2

Instead of trying to add the image to the cell, add the image to your tableView as the cell.backgroundImage . Hope that solves your problem!

Answer 3

It's hard to say without seeing anything in your custom cell or your didSelectRow method, but my guess is that this is happening because cellForRowAt is being called on each of your cells before your Alamofire requests finish.

tableView(_:cellForRowAt:) is called very often - each time a cell is about to be dequeued and come onscreen. I'd advise against putting a network call in here as Mansi mentioned. You also probably don't want to be doing that loop to get restaurant info in this function either. Both the loop and the service call will be called for each cell, every time that cell is about to be dequeued and come onscreen - this is going to get very expensive very fast. It also looks by this code that when one of the table view's cells goes offscreen then is about to come onscreen again, that cell will attempt to re-download the image even if already was downloaded previously (because cellForRow will get call again for that cell).

The text label is showing up without issues because it doesn't rely on any network call and can be drawn right away. My guess is your didSelectRow or custom cell is telling the cell to re-draw itself when selected, which is why that image is showing up when you select it.

I'd suggest moving the loop and the request outside of this function and creating some sort of data structures to hold these values. You might need to implement a loading animation in your image views while waiting for the requests to complete, and a data structure for your images could act as a cache. There's a few different ways to go about this - these are just general suggestions. Good luck!