load image from url in tableview cell from alamofire swift

Question

I am trying to load image from json using Alomofire and swiftyJSON. Json is dictionary:

{"name": {"image": "https://...",}}

Alamorefire and SwiftyJSON

var imageLoad: String!

Alamofire.request(.GET, url).responseJSON { (response) -> Void in
    if let value = response.result.value {
    let json = JSON(value)

    if let jsonDict = json.dictionary {

        let image = jsonDict["name"]!["image"].stringValue
        print(image) // https://....
        self.imageLoad = image        
    }
    self.tableView.reloadData()
    }
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! TVCell

// Configure the cell...

cell.imageTableView.image = UIImage(named: imageLoad) // not working "fatal error: unexpectedly found nil while unwrapping an Optional value"

If anyone can help? If there is another way feel free to write.

Solution 1

I share a code implemented using Swift 3 and AlamofireImage:

import UIKit
import AlamofireImage

class MovieViewCell: UICollectionViewCell {

@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var overviewLabel: UILabel!
@IBOutlet weak var posterView: UIImageView!

 func configure(for movie: Movie) {
    titleLabel.text = movie.title
    overviewLabel.text = movie.overview

    let url = URL(string: movie.poster_path!)!
    posterView.af_setImage(withURL: url)
 }

 override func prepareForReuse() {
    super.prepareForReuse()

    posterView.af_cancelImageRequest()
    posterView.image = nil
 }
}

Also, you will need Cocoapods:

platform :ios, '10.0'

inhibit_all_warnings!
use_frameworks!

target 'MovieApp' do
  pod 'Alamofire', '~> 4.5'
  pod 'AlamofireImage', '~> 3.3'
end

Official documentation AlamofireImage and an ImageCell.swift example

Solution 2

If you are using Alamofire, try AlamofireImage. But use the af_ shortcuts directly on uiimageview. Automatically you will get caching, placeholder images, and you can cancel outstanding requests if you are using a table view which could recycle the cells.

By specifying a placeholder image, the image view uses the placeholder image until the remote image is downloaded.

let imageView = UIImageView(frame: frame)
let url = URL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!

imageView.af_setImage(withURL: url, placeholderImage: placeholderImage)

https://github.com/Alamofire/AlamofireImage

Solution 3

load image from url in tableview cell from alamofire swift3 : -

//you need install pod 'AlamofireImage', '~> 3.0’ pod

    import Alamofire
    import AlamofireImage

// put into cellForRowAt

    Alamofire.request(self.profileImgArr[indexPath.row]).responseData { (response) in
                    if response.error == nil {
                             print(response.result)

                             // Show the downloaded image:
                             if let data = response.data {
                                     cell.profileImg.image = UIImage(data: data)
                                 }                
                         }
                 }

Solution 4

I recommend using a different library for loading the images. We always do this in our projects.

There is an easy and smart library which handles pretty much everything from caching to placeholder image.

It's name is Kingfisher https://github.com/onevcat/Kingfisher

You can use it directly on the ImageView with the URL from JSON Example:

let url = URL(string: "url_of_your_image")
imageView.kf.setImage(with: url)

This is the most basic Asynchronous image loading method,

Take a look for yourself :)

View more solutions

Comments

[Jeremie D]

wouldnt this have the potential to create a race condition? if the cell is loading an image, gets recycled, and the second immage loads faster than the first....

[Charmi]

I did same above mention by you. but I am using Re-usable cell. the image are also load on cell Repeateviely. Can u Help me ?

[Jeremie D]

Reusable cells are tricky because you can end up in race conditions (if you kick off a download and then reuse the cell with another image etc.) The way around this is to download the image and cache it when you get the URL. You can use DispatchGroup() to delay the completion callbacks of your URL calls which fetch the URLS until your images are downloaded. Of course, this may not work in all scenarios/if the images are really large. At that point you should probably try some lazy loading of the images, but you also have to keep track of the download in a queue to avoid race conditions...

[jkwuc89]

I suggest integrating your two line sample above into the code sample provided in the question. This will make the answer a bit more helpful.