Reputation: 2425

Image not showing in collectionView

When i run this code it shows nothing in my collectionView. My code -

   class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

        @IBOutlet weak var collectionView: UICollectionView!
        var AllImage: [String] = []
          var boolValue = false

        override func viewDidLoad() {
            super.viewDidLoad()

            collectionView.delegate = self
            collectionView.dataSource = self

            downloadJson()
        }

        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            print("Found - \(AllImage.count)")
            return AllImage.count
        }

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell:CollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CollectionViewCell
            cell.myImage.image = UIImage(named: AllImage[indexPath.row])
            return cell

        }

        //MARK: Image
        func downloadJson(){
            var access_token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEwMjc2LCJpc3MiOiJodHRwczovL2hvbWlpdGVzdC5jby56YS9hcGkvbG9naW4iLCJpYXQiOjE1NTIxOTYwMjIsImV4cCI6MTU1NDc4ODAyMiwibmJmIjoxNTUyMTk2MDIyLCJqdGkiOiJBeTY5R0JkZDA5dWdFTDBhIn0.czpQQsC08vuTB8iGdTeEjjQUmzl6I5Cs0VQ8WeA5VaY"
            let headers = ["Authorization": "Bearer "+access_token+"", "Content-Type": "application/json"]
            Alamofire.request("https://homiitest.co.za/api/gallery", method: .get,  parameters: nil, encoding: JSONEncoding.default, headers: headers).responseJSON { response in
                if response.result.isSuccess{
                    print(response)

                    let swiftyJson = JSON(response.data!)

                    let productTemplate = swiftyJson["data"].array
                    print("hello there - \(productTemplate)")

                    for product in productTemplate! {

                        if let data = product["data"].bool {
                            continue
                        } else
                        {
                            print("I am in this block")
                            self.AllImage.append(product.stringValue)

                        }
                        self.collectionView!.reloadData()
                    }

                }

            }

        }
    }

Response -

Upvotes: 1

Answers (5)

Vinodh

Reputation: 5268

Please format your download code you are not saving URL string into array to load images properly. I have updated the code. Please refer below.

//MARK: Image
    func downloadJson(){
        let access_token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEwMjc2LCJpc3MiOiJodHRwczovL2hvbWlpdGVzdC5jby56YS9hcGkvbG9naW4iLCJpYXQiOjE1NTIxOTYwMjIsImV4cCI6MTU1NDc4ODAyMiwibmJmIjoxNTUyMTk2MDIyLCJqdGkiOiJBeTY5R0JkZDA5dWdFTDBhIn0.czpQQsC08vuTB8iGdTeEjjQUmzl6I5Cs0VQ8WeA5VaY"
        let headers = ["Authorization": "Bearer "+access_token+"", "Content-Type": "application/json"]
        Alamofire.request("https://homiitest.co.za/api/gallery", method: .get,  parameters: nil, encoding: JSONEncoding.default, headers: headers).responseJSON { response in
            if response.result.isSuccess{
                //print(response)

                let swiftyJson = JSON(response.data!)

                let productTemplate = swiftyJson["data"].array
                //print("hello there - \(productTemplate)")

                for product in productTemplate! {
                    // print(product["image_medium"].stringValue)
                    self.AllImage.append(product.stringValue)
                    print("this is data - \(product.stringValue)")
                }
                self.collectionView!.reloadData()

            }

        }

    }

Upvotes: 1

Hendy Evan

Reputation: 683

You can still use Alamofire if you dont want to use another library like AlamofireImage,AFNetworking,SDWebImage, etc.

extension UIImageView {

func showImages(imageURL: String) {
    Alamofire.request(imageURL, method: .get)
        .validate()
        .responseData(completionHandler: { (responseData) in
            self.image = UIImage(data: responseData.data!)
        })
}}

You can use it like this :

cell.myImage.showImages(AllImage[indexPath.row])

Upvotes: 0

Nikunj Kumbhani

Reputation: 3924

Just add this function

func NKPlaceholderImage(image:UIImage?, imageView:UIImageView?,imgUrl:String,compate:@escaping (UIImage?) -> Void){

    if image != nil && imageView != nil {
        imageView!.image = image!
    }

    var urlcatch = imgUrl.replacingOccurrences(of: "/", with: "#")
    let documentpath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0]
    urlcatch = documentpath + "/" + "\(urlcatch)"

    let image = UIImage(contentsOfFile:urlcatch)
    if image != nil && imageView != nil
    {
        imageView!.image = image!
        compate(image)

    }else{

        if let url = URL(string: imgUrl){

            DispatchQueue.global(qos: .background).async {
                () -> Void in
                let imgdata = NSData(contentsOf: url)
                DispatchQueue.main.async {
                    () -> Void in
                    imgdata?.write(toFile: urlcatch, atomically: true)
                    let image = UIImage(contentsOfFile:urlcatch)
                    compate(image)
                    if image != nil  {
                        if imageView != nil  {
                            imageView!.image = image!
                        }
                    }
                }
            }
        }
    }
}

Just Replace

cell.myImage.image = UIImage(named: AllImage[indexPath.row])

with

// Here imgPicture = your imageView
// UIImage(named: "placeholder") is Display image brfore download and load actual image. 

NKPlaceholderImage(image: UIImage(named: "placeholder"), imageView: cell.myImage, imgUrl: AllImage[indexPath.row]) { (image) in }

This one is your first image of an array.

Upvotes: 1

Fady A. Ackad

Reputation: 125

UIImage(named: String) loads an image from the Asset Catalog. As AllImage contains urls of images, you'll need to download each image first before displaying it. I'd recommend using a library (Kingfisher is a great one and fairly easy to use). You'll need to replace this line of code

cell.myImage.image = UIImage(named: AllImage[indexPath.row])

with

let url = URL(string: AllImage[indexPath.row])
cell.myImage.kf.setImage(with: url)

Upvotes: 1

user9106403

Reputation:

Try this if you do not want to install pod. let imageCache = NSCache()

extension UIImageView {

    func imageFromServerURL(_ URLString: String, placeHolder: UIImage?) {

        self.image = nil
        if let cachedImage = imageCache.object(forKey: NSString(string: URLString)) {
            self.image = cachedImage
            return
        }

        self.image = placeHolder

        if let url = URL(string: URLString) {
            URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) in
                if error != nil {
                    print("ERROR LOADING IMAGES FROM URL: \(String(describing: error))")
                    return
                }
                DispatchQueue.main.async {
                    if let data = data {
                        if let downloadedImage = UIImage(data: data) {
                            imageCache.setObject(downloadedImage, forKey: NSString(string: URLString))
                            self.image = downloadedImage
                        }
                    }
                }
            }).resume()
        }
    }
}

Use :

cell.myImage.imageFromServerURL(AllImage[indexPath.row], placeHolder:PLACEHOLDER_IMAGE)

let me know if you have any doubts.

Upvotes: 0

Image not showing in collectionView

Answers (5)

Related Questions