How to display JSON image on CollectionViewCell using Swift

In your case, there are several ways to solve this problem.

The most basic and primitive method:

In this situation, you can simply use URLSession.shared to download the image and set it to the cell’s UIImageView. In the example below, you can see that I simply send a request with the image’s URL, get the data, and initialize a UIImage using that data.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = mainCollectionView.dequeueReusableCell(withReuseIdentifier: "mainCell", for: indexPath) as! MainCollectionViewCell

    if let nextJoke = self.jokes?[indexPath.row] {
        let joke = nextJoke.image
        let jokeWay = URL(string: "https://picsum.photos/1500/600")

        if let jokeWay = jokeWay {
            URLSession.shared.dataTask(with: jokeWay) { data, response, error in
                if let data = data, let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        cell.cardImage.image = image
                    }
                } else {
                    print("Error handling")
                }
            }.resume()
        }
    }
    return cell
}

Important notes!

1. I replaced the URL jokeWay with https://picsum.photos/1500/600
   because I wasn’t sure if I could retrieve an image with the link
   from your request. Just replace it with your link, but first, make
   sure you can actually retrieve an image from that link.

2. It’s crucial to return to the main thread after the image has been
   downloaded.

3. There are several critical issues with this solution, which I will
   describe and provide fixes for below.

PROBLEM #1:

When scrolling quickly, you’ll notice that the images in the cells flicker (multiple images swap between each other). This happens due to the asynchronous image loading and the cell reuse mechanism in UICollectionView. In short, here’s what’s happening:

• You start scrolling quickly, and cells get reused.

• The image-loading code gets executed multiple times for the same cell.

• The cell’s image changes multiple times after all the loading operations are completed.

• The final image set in the cell won’t be the last one that was downloaded, but the one that finished downloading first. As a result, you might see an image intended for cell 8 in cell 13.

You can solve this problem simply without relying on third-party libraries. Solution:

URLSession.shared.dataTask(with: jokeWay) { [cell, indexPath] data, response, error in
    if let data = data, let image = UIImage(data: data) {
        DispatchQueue.main.async {
            // We add a check for the cell's IndexPath.
            // If the current indexPath of this cell differs from the indexPath at the start of the download, then we shouldn't set the image since another image download might have started for this cell.
            guard collectionView.indexPath(for: cell) == indexPath else {
                print("Cell matching problem detected")
                return
            }
            cell.cardImage.image = image
        }
    } else {
        print("Error handling")
    }
}.resume()

PROBLEM #2:

Though we’ve addressed the flickering of images in cells, part of the issue remains. This is again due to reuse. We’re not getting a clean cell but one with data from its previous use. As a result, we might see images from other cells that have scrolled out of view. To fix this, you should add the following code to your cell:

class MainCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var cardImage: UIImageView!
    @IBOutlet weak var cardLabel: UILabel!

    // Other code ...

    override func prepareForReuse() {
        super.prepareForReuse()
        cardImage.image = nil
        // or
        // cardImage.image = UIImage(named: "any placeholder from your Assets")
    }

    // Other code ...
}

By doing this, we clear the cell of data left over from reuse.

PROBLEM #3:

The image loading method I described above is not the most optimal.
It lacks caching, which, when loading images into a UICollectionView or UITableView, can save a significant amount of device resources, especially internet traffic.
For this, you can use a library like Kingfisher, Nuke, SDWebImage, and so on.

Good luck with your learning!