Download image to TableView [Swift]

Question

I have a swift project with the following files:

– ViewController.swift which mostly contains a tableView and in which data from Firebase is downloaded

– ViewControllerTableViewCell.swift which contains the outlets for the tableView

– DataModel.swift which contains the model for the Firebase data

In the table, I have included some labels which are filled with the data from Firebase, next to an imageView. The URL of the image is received in the ViewController.swift-file as authorAvatarUrl next to other strings from Firebase. After this process, the data is appended to a list (self.dataList.append(downloadeddata)) and the table is reloaded:

self.tableViewData.reloadData()

How can I download the image and display it in the imageView (which is inside a table cell)?

I have tried

// Declare variable
var cellViewController = ViewControllerTableViewCell()

[...]

// Download author's avatar
let avatarURL = URL(string: authorAvatarUrl as! String)
                Alamofire.request(avatarURL!).responseData { (response) in

                    if response.error == nil {

                        if let data = response.data {

                            self.cellViewController.profileImageView.image = UIImage(data: data)

                        }

                    }

                }

inside the ViewController.swift-file however, this is not working.

Do you have any errors? Did you try to add breakpoints and see how your code is executed? — Daniil Subbotin, Oct 13 '18 at 12:30
It's a good idea to include your troubleshooting steps instead of just saying it isn't working. Have you stepped through your code and checked to see if the vars are being populated? Is there an error? is response.error == nil? is authorAvatarUrl a valid URL? — Jay, Oct 13 '18 at 13:11

score 2 · Accepted Answer · answered Oct 13 '18 at 13:06

If I understand it correctly the problem with your code may be that you are not referencing a TableViewCell which is currently displayed in the TableView, but rather a single cell you declared in the ViewController but never presented.

You should move the code to perform the network request in the ViewControllerTableViewCell class or in the tableView(_:cellForRowAt:) method, and should reference to the given cell.

As others pointed out, there are many libraries who can help you with downloading the image's data and setting the UIImageView; since you are already using Alamofire you could use AlamofireImage.

Then the simplest way to download images will be to include this code in your ViewController

var allAvatarURLs: [URL] = // the array containing all the avatars' url

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let row = indexPath.row
    let url = allAvatarURLs[row]
    let cell = tableView.dequeueReusableCell(withIdentifier: "<yourIdentifier>", for: indexPath) as! ViewControllerTableViewCell
    cell.profileImageView.image.af_setImage(withURL: url) // UIImageView extension in AlamofireImage
    return cell
}

Where allAvatarURLs holds all images' url.

score 1 · Answer 2 · answered Oct 13 '18 at 12:45

1

Use a library like Kingfisher

Then you simply use:

let url = URL(string: "url_of_your_image")
imageView.kf.setImage(with: url)

answered Oct 13 '18 at 12:45

Dinsen

2,139
3
19
25

Download image to TableView [Swift]

2 Answers2