asynchronously loading images in swift

Question

I have an image that I want shown at the top of the view in a table view cell.

I have the following code that asynchronously loads that image and adds it to the cell:

 if let image = value?["image"]  {
                            let bookImageUrl =  URL(string: image as! String)
                            let data = try? Data(contentsOf: bookImageUrl!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
                            DispatchQueue.main.async {
                                if data != nil {
                                    let imageView = UIImageView(image: UIImage(data: data!));
                                    imageView.frame = CGRect(x: 0,
                                                             y: 95,
                                                             width: cell.frame.size.width,
                                                             height: 150)
                                    imageView.contentMode = .scaleAspectFill
                                    imageView.isUserInteractionEnabled = false
                                    cell.addSubview(imageView)

                                    let label = UILabel(frame: CGRect(x: 10,
                                                                      y: cell.frame.size.height-60,
                                                                      width: cell.frame.size.width,
                                                                      height: 50));
                                    label.textColor = UIColor.black
                                    label.backgroundColor = UIColor.init(red: 1, green: 1, blue: 1, alpha: 0.5)
                                    label.font = UIFont(name: "CeraPro-Bold", size: 16)
                                    label.text = "  \(title)"
                                    cell.addSubview(label)
                                }
                            }
                        }

Unfortunately, sometimes the image does not get loaded. Am I doing something wrong?

Answer 1

If you are using tableView.dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath) in func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell, here UITableView do reusing of those cells dequeueReusableCell(withIdentifier:)

So as with the problem you mentioned is with some times the images do not get shown, this might be because of the UITableView is reusing the cells, so, it will be better if you use else for every if statement. Or you can use something like, SDWebImage or Kingfisher for image caching.

Also note that, as the UITableView does reuse every cell so it will be better to remove all subviews or create a variable in class for 'UITableViewCell' before adding any view over programmatically, as in your code cell.addSubview(imageView) and cell.addSubview(label) the imageView and label is getting initialized and added over and over for every reuse and every URL check, Here what you can do is create a variable for label and imageview in the cell and initialize only if the variable is nil and assign the image afterwards.