Swift and JSON url Image, edited - swift

Question

So this is the code that I am using to create my table view from scratch. My question is how can I parse an image if the image is of string (url) format?
class ArticleCell : UITableViewCell {
var article: Article? {
didSet {
articleTitle.text = article?.title
//articleImage.image = article?.urlToImage
descriptionTitle.text = article?.description
}
}
private let articleTitle : UILabel = {
let lbl = UILabel()
lbl.textColor = .black
lbl.font = UIFont.boldSystemFont(ofSize: 20)
lbl.textAlignment = .left
return lbl
}()
private let descriptionTitle : UILabel = {
let desclbl = UILabel()
desclbl.textColor = .black
desclbl.font = UIFont.boldSystemFont(ofSize: 10)
desclbl.textAlignment = .left
return desclbl
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(articleTitle)
addSubview(descriptionTitle)
Because then what I would like to do is:
addsubview(articleImage)
I get an error as I am declaring an image but it is in a string format. Now, using storyboard is easy, but programmatically I have this issue.
Is it more understandable now? I am so sorry if I made confusion.

Answer 1

To load an image from a URL (or string) we first need to do the following:
guard let urlToImage = article?.urlToImage, let urlContent = URL(string: urlToImage) else { return }
if let data = try? Data(contentsOf: urlContent) {
if let image = UIImage(data: data) {
articleImage.image = image
}
}
}
However this creates a terrible UI experience for the user as image loading from a URL synchronously will hold up our main thread and everyone else in the queue will be stuck waiting for image loading to finish.
For the user's sake, let's set title and description so long but send image loading on some background thread. It should look something like this:
var article: Article? {
didSet {
articleTitle.text = article?.title
descriptionTitle.text = article?.description
guard let urlToImage = article?.urlToImage, let urlContent = URL(string: urlToImage) else { return }
DispatchQueue.global().async {
if let data = try? Data(contentsOf: urlContent) {
if let image = UIImage(data: data) {
DispatchQueue.main.async { [weak self] in
self?.articleImage.image = image
self?.setNeedsLayout()
}
}
}
}
}
}
When we have our image we set it on main thread again and call setNeedsLayout() to tell the cell that it needs to adjust the layout of it's subviews.
NOTE: The above solution works if you are displaying very little cells. If you are displaying MANY cells on your tableview and you want to scroll while they load, you will encounter the age old problem of loading cell content (in this case the image) at the incorrect index path. I suggest reading up on how to asynchronously load images into table and collection views. Have fun!