Download Image from Api Url and show in Collection view in swift using Alamofire

Question

I already am able to fetch the url from the Api which is in Json format. But this one is the image url. now how can I able to download that image from url and show in collection view. I have

code

 override func viewDidLoad() {
    super.viewDidLoad()

    Alamofire.request(.GET, "http://\(platform).eposapi.co.uk/?app_id=\(apiID)&app_key=\(apikey)&request=&request=gallery", parameters: nil)
        .responseJSON { response in
            print(response.request)  // original URL request
            print(response.response) // URL response
            print(response.data)     // server data
            print(response.result)   // result of response serialization

            if let JSON = response.result.value {
                print("JSON: \(JSON)")

                   self.imageData = JSON as! Array<AnyObject>
                   print(self.imageData)
                   print("total number of images = \(self.imageData.count)")
                   for image in self.imageData{
                   print(image)
            }



    }

In JSON all the image url are coming . I can see it. Now how to download image from that url and show in collection view. Please tell anyone how can I apply here.

The image url I got is:

[http://chicoshorwich.com/img/14517241531454.jpg,
http://chicoshorwich.com/img/14517241944082.jpg, http://chicoshorwich.com/img/14517273984235.jpg, http://chicoshorwich.com/img/14517274885779.jpg, http://chicoshorwich.com/img/1451727556453.jpg, http://chicoshorwich.com/img/14614027267627.jpg, http://chicoshorwich.com/img/14517278515475.jpg, http://chicoshorwich.com/img/14614068518289.jpg, http://chicoshorwich.com/img/14616123258824.jpg, http://chicoshorwich.com/img/14614027528137.jpg, http://chicoshorwich.com/img/14517344227700.jpg, http://chicoshorwich.com/img/1461402768681.jpg, http://chicoshorwich.com/img/14614028323203.jpg, http://chicoshorwich.com/img/14614029485351.jpg, http://chicoshorwich.com/img/14614029565341.jpg, http://chicoshorwich.com/img/14614068296679.jpg] total number of images = 16

Please tell the solution.

Answer 1

Use my code . this is I think exact your answer according to your data. I have edited few things in your codes.Try it.

code

         Alamofire.request(.GET, "http://\(platform).eposapi.co.uk/?app_id=\
        (apiID)&app_key=\(apikey)&request=&request=gallery", parameters: nil)
        .responseJSON { response in
                       print(response.request)  // original URL request
                       print(response.response) // URL response
                       // print(response.data)     // server data
                       print(response.result)   // result of response serialization

                    if let JSON = response.result.value {
                        print("JSON: \(JSON)")

                        self.imageData = JSON as! Array<String>
                        print(self.imageData)
                        print("total number of images = \(self.imageData.count)\n")
                        for image in self.imageData{
                        print(image)
                    }
                        dispatch_async(dispatch_get_main_queue()) {
                            self.GalleryCollectionView.reloadData()
                        }


                 }

now create a custom Collectionviewcell named "GalleryCollectionViewCell" and add it to the "cellForItemAtIndexPath" method

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Gallerycell", forIndexPath: indexPath) as! GalleryCollectionViewCell


    let url = NSURL(string: imageData[indexPath.row])
    cell.galleryImageView.af_setImageWithURL(url!, placeholderImage: UIImage(named: "logo.png"), filter: nil,  imageTransition: .CrossDissolve(0.5), runImageTransitionIfCached: true, completion: nil)


return cell
}

On "placeholder" take any loader image from assets. I have used here logo.png. You can take yours.

Answer 2

You can call all images URL one by one

//define your dispatch queue

    private let downloadQueue = dispatch_queue_create("ru.downloadimage.downloadQueue", nil)

//Define also this
private var photos = [NSURL]()

// Add your URL here like this or you can do as per your choice
if let urls = jsonDictionary.valueForKeyPath("download data") as? [String] {
                for (i, url) in urls.enumerate() {
                    photos.append(NSURL(string: url)!)
                }
            }

This is code for Download block for images here

// Define the cache variable first 
private var cache = NSCache()



// MARK: - Private

    private func downloadPhoto(url: NSURL, completion: (url: NSURL, image: UIImage) -> Void) {
        dispatch_async(downloadQueue, { () -> Void in
            if let data = NSData(contentsOfURL: url) {
                if let image = UIImage(data: data) {
                    dispatch_async(dispatch_get_main_queue(), { () -> Void in
                        self.cache.setObject(image, forKey: url)
                        completion(url: url, image: image)
                    })
                }
            }
        })
    }

Call this function from Collection View like this

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(cellIdentifier, forIndexPath: indexPath) as! PhotoCell
        let url = photos[indexPath.item]
        let image = cache.objectForKey(url) as? UIImage

        cell.imageView.backgroundColor = UIColor(white: 0.95, alpha: 1)
        cell.imageView.image = image

        if image == nil {
            downloadPhoto(url, completion: { (url, image) -> Void in
                let indexPath_ = collectionView.indexPathForCell(cell)
                if indexPath.isEqual(indexPath_) {
                    cell.imageView.image = image
                }
            })
        }

        return cell
    }

Answer 3

Its easy to download image with Alamofire if you have imageURL.

make sure you have import AlamofireImage pod installed and you have

import AlamofireImage

    Alamofire.request(.GET, url) // url is string here.
                .responseImage { response in 
                    if let image = response.result.value {
                        // image is here. 
                    }else{
                        // check what happned.
                    }
            }

more information can be found @ https://github.com/Alamofire/AlamofireImage

Answer 4

write The Ccr code inside cellForItemAtIndexPath and provide url from url array. Ccr code is correct.But some cases the above code takes time to update UI .So instead of above use the below code if you are using AlamofireImage.

 yourCell.yourCell_ImageView.af_setImage(withURL: URL(string: imageUrl)!)