Swift async load image

Question

I am working on show image from url async. I have tried to create a new thread for download image and then refresh on main thread.

func asyncLoadImg(product:Product,imageView:UIImageView){
    let downloadQueue = dispatch_queue_create("com.myApp.processdownload", nil)
    dispatch_async(downloadQueue){
        let data = NSData(contentsOfURL: NSURL(string: product.productImage)!)
        var image:UIImage?
        if data != nil{
            image = UIImage(data: data!)
        }
        dispatch_async(dispatch_get_main_queue()){
            imageView.image = image
        }

    }
}

When I was trying to debug that, when it comes to dispatch_async(downloadQueue), it jumps out the func. Any suggestion? Thx

:( not working, same error. The operations in back thread never be executed — Janice Zhan, May 04 '16 at 05:34
@LeoDabus Can you explain it more specifically? I cannot understand — Janice Zhan, May 04 '16 at 05:40
Add that UIImageView extension to your project and just load your image using `yourImageView.downloadedFrom(yourImageLink, ... )` — Leo Dabus, May 04 '16 at 05:42
put the debug point inside the block, step-in button wont go into the block. — RJE, May 04 '16 at 05:54
@JaniceZhan kindly make exact answer as correct answer , so that it benefits other to resolve issue , which gets maximum upvote — Shobhakar Tiwari, Nov 03 '16 at 19:56

Shobhakar Tiwari · Answer 1 · 2021-08-25T10:50:21.670

106

**Swift 5.0+ updated Code :

extension UIImageView {

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

        self.image = nil
        //If imageurl's imagename has space then this line going to work for this
        let imageServerUrl = URLString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? ""
        

        if let url = URL(string: imageServerUrl) {
            URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) in

                //print("RESPONSE FROM API: \(response)")
                if error != nil {
                    print("ERROR LOADING IMAGES FROM URL: \(error)")
                    DispatchQueue.main.async {
                        self.image = placeHolder
                    }
                    return
                }
                DispatchQueue.main.async {
                    if let data = data {
                        if let downloadedImage = UIImage(data: data) {
                       
                            self.image = downloadedImage
                        }
                    }
                }
            }).resume()
        }
    }
}

Now wherever you required just do this to load image from server url :

Using swift 5.0 + updated code using placeholder image : UIImageView.imageFromServerURL(URLString:"here server url",placeHolder: placeholder image in uiimage format)

Simple !

edited Aug 25 '21 at 10:50

answered May 04 '16 at 05:52

Shobhakar Tiwari

7,862
4
36
71

Does it help then make it correct answer and close the question. – Shobhakar Tiwari May 04 '16 at 07:13
2

I think this should be the correct answer because it's more succinct. :+1: – Andrew Sowers Aug 08 '16 at 13:35
Could you write the same extension for Swift 3 ? – Kirill Oct 15 '16 at 12:30
2

@Kirill updated Code in Swift 3 . Try it . Hope it helps to resolve your issue – Shobhakar Tiwari Oct 16 '16 at 18:08
The Swift 3 version doesn't work for me. I am getting: Use of instance member imageFromServerURL on type UIImageView; did you mean to use a value of type UIImageView instead? Any Help is appreciated. Thank you. – recoilnetworks Oct 24 '16 at 06:02
just use this way : UIImageView.imageFromServerURL("here server url") , if it dint work then post exact line you used to show image in imageview – Shobhakar Tiwari Oct 25 '16 at 05:41
@ShobhakarTiwari I get the same error in swift 3 as pointed by recoilnetworks. this is the line : if let url = URL(string: item["ProfilePhoto"] as! String){ cell.imageView.image = UIImageView.imageFromServerURL(url) } Please give some solution – Mamta May 25 '17 at 10:15
Which version of swift , let me know it must be greater than 3.0 . In swift 3.0 this soln works @mamta – Shobhakar Tiwari May 25 '17 at 10:35
you should use this : if let url = URL(string: item["ProfilePhoto"] as? String not use ! (Force Wrapping operator like this ) it will cause crash . Still this answer suits it – Shobhakar Tiwari Jun 01 '17 at 18:44
1

Excellent code. Easily best/simplest answer to this common issue. Thanks @ShobhakarTiwari! – Waggoner_Keith Jan 27 '18 at 20:51
@Waggoner_Keith thanks , it helps to solve your issue – Shobhakar Tiwari Jan 28 '18 at 17:32
1

I'm using this code for display image in horizontal collection view inside tableview & when scrolling tableview cells images conflict on imageview.how to solve it ? – Dharini Aug 11 '18 at 05:41
updated answer , check it out by using self.image = nil . – Shobhakar Tiwari Aug 11 '18 at 12:00
1

@ShobhakarTiwari i used above code in UITable the image only update after scroll and changed while scrolling. – guru Aug 14 '18 at 14:11
i am updating it , check my new answer – Shobhakar Tiwari Aug 18 '18 at 12:54
1

Your update for Swift 5 is not compiling. ```let imageCache = NSCache()``` Gives error: ```Extensions must not contain stored properties``` – Trevor Sep 24 '20 at 10:29
Swift 5 is not compiling. Extensions must not contain stored properties. – MGY Nov 04 '20 at 09:15

javimuu · Answer 2 · 2017-07-19T02:45:47.137

Use extension in Swift3. To resolve Network problem i recommend you use NSCache:

import UIKit

let imageCache = NSCache<NSString, AnyObject>()

extension UIImageView {
    func loadImageUsingCache(withUrl urlString : String) {
        let url = URL(string: urlString)
        self.image = nil

        // check cached image
        if let cachedImage = imageCache.object(forKey: urlString as NSString) as? UIImage {
            self.image = cachedImage
            return
        }

        // if not, download image from url
        URLSession.shared.dataTask(with: url!, completionHandler: { (data, response, error) in
            if error != nil {
                print(error!)
                return
            }

            DispatchQueue.main.async {
                if let image = UIImage(data: data!) {
                    imageCache.setObject(image, forKey: urlString as NSString)
                    self.image = image
                }
            }

        }).resume()
    }
}

Hope it help!

Why you used `NSString`, `AnyObject`, instead `String`, `Any` ? — Jack, Jun 21 '18 at 10:12

score 5 · Answer 3 · answered Apr 03 '17 at 18:00

Carrying on from Shobhakar Tiwari's answer, I think its often helpful in these cases to have a default image in case of error, and for loading purposes, so I've updated it to include an optional default image:

Swift 3

extension UIImageView {
public func imageFromServerURL(urlString: String, defaultImage : String?) {
    if let di = defaultImage {
        self.image = UIImage(named: di)
    }

    URLSession.shared.dataTask(with: NSURL(string: urlString)! as URL, completionHandler: { (data, response, error) -> Void in

        if error != nil {
            print(error ?? "error")
            return
        }
        DispatchQueue.main.async(execute: { () -> Void in
            let image = UIImage(data: data!)
            self.image = image
        })

    }).resume()
  }
}

dont make duplicate answer , you can comment on answer so that developer get benefit from it — Shobhakar Tiwari, Apr 30 '17 at 05:48

score 2 · Answer 4 · answered Jul 08 '17 at 09:34

This solution make scrolling really fast without unnecessary image updates. You have to add the url property to our cell class:

class OfferItemCell: UITableViewCell {
    @IBOutlet weak var itemImageView: UIImageView!
    @IBOutlet weak var titleLabel: UILabel! 
    var imageUrl: String?
}

And add extension:

import Foundation
import UIKit

let imageCache = NSCache<AnyObject, AnyObject>()
let imageDownloadUtil: ImageDownloadUtil = ImageDownloadUtil()

extension OfferItemCell {
    func loadImageUsingCacheWithUrl(urlString: String  ) {
         self.itemImageView.image = nil
        if let cachedImage = imageCache.object(forKey: urlString as AnyObject) as? UIImage {
            self.itemImageView.image = cachedImage
            return
        }
        DispatchQueue.global(qos: .background).async {
            imageDownloadUtil.getImage(url: urlString, completion: {
                image in
                DispatchQueue.main.async {
                    if self.imageUrl == urlString{
                        imageCache.setObject(image, forKey: urlString as AnyObject)
                     self.itemImageView.image = image
                    }
                }
            })
        }
    }
}

You can also improve it and extract some code to a more general cell class i.e. CustomCellWithImage to make it more reusable.

I am getting compile errors for ImageDownloadUtil. I can't see how it is declared and I am not sure how to make my own version of it. — iCyberPaul, Oct 13 '17 at 10:08

score 1 · Answer 5 · answered Oct 01 '16 at 04:32

Here this code might help you.

   let cacheKey = indexPath.row
   if(self.imageCache?.objectForKey(cacheKey) != nil){
           cell.img.image = self.imageCache?.objectForKey(cacheKey) as? UIImage
    }else{
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), {
             if let url = NSURL(string: imgUrl) {
                  if let data = NSData(contentsOfURL: url) {
                            let image: UIImage = UIImage(data: data)!
                            self.imageCache?.setObject(image, forKey: cacheKey)
                            dispatch_async(dispatch_get_main_queue(), {
                                cell.img.image = image
                            })
                        }
                    }
                })
            }

With this image will download and cache without lagging the table view scroll

Awesome solution! But if i scroll fast i can still see the images changing from one to another, is there a way to avoid this or its impossible? — Adrian, Jan 23 '17 at 21:13
@Adrian Yes, you can check if image is nil or not, if it is nil you load it, if not - not. — wm.p1us, Jul 09 '17 at 11:59

PiterPan · Answer 6 · 2017-12-29T16:37:55.593

The most common way in SWIFT 4 to load async images without blink or changing images effect is use to custom UIImageView class like this one:

//MARK: - 'asyncImagesCashArray' is a global varible cashed UIImage
var asyncImagesCashArray = NSCache<NSString, UIImage>()

class AyncImageView: UIImageView {

//MARK: - Variables
private var currentURL: NSString?

//MARK: - Public Methods

func loadAsyncFrom(url: String, placeholder: UIImage?) {
    let imageURL = url as NSString
    if let cashedImage = asyncImagesCashArray.object(forKey: imageURL) {
        image = cashedImage
        return
    }
    image = placeholder
    currentURL = imageURL
    guard let requestURL = URL(string: url) else { image = placeholder; return }
    URLSession.shared.dataTask(with: requestURL) { (data, response, error) in
        DispatchQueue.main.async { [weak self] in
            if error == nil {
                if let imageData = data {
                    if self?.currentURL == imageURL {
                        if let imageToPresent = UIImage(data: imageData) {
                            asyncImagesCashArray.setObject(imageToPresent, forKey: imageURL)
                            self?.image = imageToPresent
                        } else {
                            self?.image = placeholder
                        }
                    }
                } else {
                    self?.image = placeholder
                }
            } else {
                self?.image = placeholder
            }
        }
    }.resume()
}
}

example of use this class in UITableViewCell bellow:

class CatCell: UITableViewCell {

//MARK: - Outlets
@IBOutlet weak var catImageView: AyncImageView!

//MARK: - Variables

var urlString: String? {
    didSet {
        if let url = urlString {
            catImageView.loadAsyncFrom(url: url, placeholder: nil)
        }
    }
}

override func awakeFromNib() {
    super.awakeFromNib()
}
}

score 1 · Answer 7 · answered Apr 04 '18 at 18:43

One of the best way is to used SDWebImage.

Swift Example:

import SDWebImage
imageView.sd_setImage(with: URL(string: "ImageUrl"), placeholderImage: UIImage(named: "placeholder.png"))

Objective C Example:

#import <SDWebImage/UIImageView+WebCache.h>
[imageView sd_setImageWithURL:[NSURL URLWithString:@"ImageUrl"]
         placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

Swift async load image

7 Answers7

Linked