UITableViewCell loading incorrect image after reuse

Question

I have a tableview that populates its cells with data from firebase. Each cell posses an image and each image is loaded asynchronously and cached. The problem is that random cells will use the wrong image, although the other data in the cell is correct. If I scroll so that the cell goes off view, the correct image then loads.

Research:

Images in UITableViewCells are loading wrong (Dont really understand Obj C)

What is the correct way to use prepareForReuse?

Image Cache:

import Foundation
import UIKit

let imageCache = NSCache<NSString, AnyObject>()

extension UIImageView {

    func loadImageUsingCache(urlString: String) {
        self.image = #imageLiteral(resourceName: "logo3")

        if let cachedImage = imageCache.object(forKey: urlString as NSString) as? UIImage {
            self.image = cachedImage
            return
        }

        let url = URL(string: urlString)
        URLSession.shared.dataTask(with: url!, completionHandler: {(data, response, error) in
            if error != nil {
                print(error!)
                return
            }

            DispatchQueue.main.async(execute: {
                if let downloadedImage = UIImage(data: data!) {

                    imageCache.setObject(downloadedImage, forKey: urlString as NSString)
                    self.image = downloadedImage
                }
            })

        }).resume()



    }

}

Tableview Cell

import Foundation
import Firebase

class GroupCell: UITableViewCell {

    var group: Groups!
    var members = [String]()


    @IBOutlet weak var groupImage: UIImageView!
    @IBOutlet weak var groupName: UILabel!
    @IBOutlet weak var groupRep: UILabel!
    @IBOutlet weak var memberCount: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()

    }


    func configureCell(group: Groups) {
        self.group = group

        self.groupName.text = group.name
        self.groupRep.text = "\(group.groupScore)"

        if let groupImage = group.groupImage {
            self.groupImage.loadImageUsingCache(urlString: groupImage)

        } else {
            self.groupImage.image = //random image
        }

        for member in group.members {
            self.members.append(member.key)

        }
         self.memberCount.text = "\(members.count)"
    }
}

TableView

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        if let cell = tableView.dequeueReusableCell(withIdentifier: "groupCell") as? GroupCell {
            let group = FriendSystem.system.activeGroups[indexPath.row]
            cell.configureCell(group: group)

            return cell
        }

        return UITableViewCell()
    }

You probably want to use something like KingFisher to make your life easier. https://github.com/onevcat/Kingfisher — DoesData, Oct 17 '17 at 18:33
Possible duplicate of [Swift Images change to wrong images while scrolling after async image loading to a UITableViewCell](https://stackoverflow.com/questions/35958826/swift-images-change-to-wrong-images-while-scrolling-after-async-image-loading-to) — DoesData, Oct 17 '17 at 18:34
Used Kingfisher and life is good. Thanks for the reccomendation — Chris, Oct 18 '17 at 02:49

score -1 · Answer 1 · answered Oct 17 '17 at 18:48

-1

Sounds like you need to add the prepareForReuse method to your GroupCell class.

In that method add self.groupImage.image = nil It will reset your image view to empty until the correct image is set.

answered Oct 17 '17 at 18:48

darrenallen7

821
4
9

I actually had implemented this code prior without success. It was apart of one of the threads I mentioned – Chris Oct 17 '17 at 19:05

UITableViewCell loading incorrect image after reuse

1 Answers1