Messagekit: Async Images with KingFisher with configureMediaMessageImageView

[gorbat-o]

Hello guys,

I am trying to have asynchronous pictures in the messages list.
I tried to override configureMediaMessageImageView.

This is my code:

func configureMediaMessageImageView(_ imageView: UIImageView,
                                        for message: MessageType,
                                        at indexPath: IndexPath,
                                        in messagesCollectionView: MessagesCollectionView) {
        switch message.kind {
        case .photo:
            let urlString = messages[indexPath.section].imageURL
            if let url = URL(string: urlString) {
                    let resource = ImageResource(downloadURL: url, cacheKey: urlString)
                    imageView.kf.setImage(with: resource)
            }
        default:
            break
        }
}

I also tried this:

func configureMediaMessageImageView(_ imageView: UIImageView,
                                        for message: MessageType,
                                        at indexPath: IndexPath,
                                        in messagesCollectionView: MessagesCollectionView) {
        switch message.kind {
        case .photo:
            if let messagee = message as? Message, let url = URL(string: messagee.imageURL) {
                    let resource = ImageResource(downloadURL: url, cacheKey: messagee.imageURL)
                    imageView.kf.setImage(with: resource)
                    messagesCollectionView.reloadItems(at: [indexPath])
            }
        default:
            break
        }
}

both cases are not working. (I checked I have an url and when I am testing it in my navigator it is printing the pictures)

Am I doing anything wrong ?
thank you

[ahmedmukbil]

I don't know why you're using a dispatchQue there. Kingfisher already manages that for you. So less code for you.

I do something similar with Kingfisher, here's my code, it works well.

func configureMediaMessageImageView(_ imageView: UIImageView, for message: MessageType, at indexPath: IndexPath, in messagesCollectionView: MessagesCollectionView)
    {
        switch message.kind {
        case .photo(let photoItem):

            /// if we don't have a url, that means it's simply a pending message
            guard let url = photoItem.url else {
                imageView.kf.indicator?.startAnimatingView()
                return
            }
            imageView.kf.indicatorType = .activity
            imageView.kf.setImage(with: url)

        default:
            break
        }
    }

Hope it helps :)

[ahmedmukbil]

(also, @gorbat-o , it would help others understand your issue if you give it a bit more description .. not just "it's not working" .. tell exactly what the expected behavior is and what the observe behavior is)

[gorbat-o]

Hey @ahmedmukbil

Thank you for your help.
Yes you are right, I was in a rush I didn't take the time to do it well sorry 😅

I also had an other issue with Kingfisher but I managed it. (headers was wrong for this case)

It works now, I followed your example, it also showed me that I was using MessageKit wrong.
I created a class that inherit of MediaItem for passing the url of the images.

Thank you again for your help @ahmedmukbil 👍

[Meox92]

Hi, I tried @ahmedmukbil code but my photoItem.url is always empty, I don't understand how I can set it..
Basically I get the messages list json and check if there any "imageURL" key, if yes I initialize a MockMessage(image: image etc) as shown in the example project

[nathantannar4]

@Meox92 The example project never sets the imageURL, that is something you must implement when you create the MessageType object