Place Photo from URL as a Navigation Bar Button Item

Question

So far I have been trying to achieve the left bar button item you can see in the following picture:

I have not coded in the style yet but simply the basic code for getting the profile picture. Here it is:

let user = FIRAuth.auth()?.currentUser
var profilePicture: UIImageView?

override func viewDidLoad() {
    //left bar button item setup

    if let profileURL = self.user?.photoURL?.absoluteString {
        let profilePictureUrl = NSURL(string: profileURL)
        profilePicture?.af_setImage(withURL: profilePictureUrl as! URL)

        let barButton = UIBarButtonItem(image: profilePicture?.image, landscapeImagePhone: nil, style: .done, target: self, action: #selector(revealBackClicked))
        self.navigationItem.leftBarButtonItem = barButton
    }


}

I am retrieving my photo from firebase using the following function:

self.user?.photoURL?.absoluteString

I am receiving a url as I tested it by printing it in my output. However, I think the problem is when I set the image in the profilePicture variable because when i print that out I receive nil.

Any help would be much appreciated!

Answer 1

The problem you are trying to set an image to UIBarButtonItem while still downloading the image. You should download the image and then set the image to UIBarButtonItem.

let profilePictureUrl = NSURL(string: profileURL)

let downloader = ImageDownloader()
let urlRequest = URLRequest(url: profilePictureUrl)

downloader.download(urlRequest) { response in
    if let image = response.result.value {
        let barButton = UIBarButtonItem(image: image, landscapeImagePhone: nil, style: .done, target: self, action: #selector(revealBackClicked))
        self.navigationItem.leftBarButtonItem = barButton
    }
}