CODEWITHSUNDEEP
iosjsonswiftnsdictionary
Gergely Kovacs
Gergely Kovacs

Reputation: 1051

Display image from URL, Swift 4.2

I am a fairly decent Objective C developer, and I am now learning Swift (of which I am finding quite difficult, not only because of new concepts, such as optionals, but also because Swift is continually evolving, and much of the available tutorials are severely outdated).

Currently I am trying parse a JSON from a url into an NSDictionary and then use one of its value to display an image (which is also a url). Something like this:

URL -> NSDictionary -> init UIImage from url -> display UIImage in UIImageView

This is quite easy in Objective C (and there may even be a shorter answer):

NSURL *url = [NSURL URLWithString:@"https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY"];
NSData *apodData = [NSData dataWithContentsOfURL:url];
NSDictionary *apodDict = [NSJSONSerialization JSONObjectWithData:apodData options:0 error:nil];

The above code snippet gives me back a standard NSDictionary, in which I can refer to the "url" key to get the address of the image I want to display:

"url" : "https://apod.nasa.gov/apod/image/1811/hillpan_apollo15_4000.jpg"

This I then convert into a UIImage and give it to a UIImageView:

NSURL *imageURL = [NSURL URLWithString: [apodDict objectForKey:@"url"]];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *apodImage = [UIImage imageWithData:imageData];

UIImageView *apodView = [[UIImageView alloc] initWithImage: apodImage];

Now, I am basically trying to replicate the above Objective C code in Swift but continuously run into walls. I have tried several tutorials (one of which actually did the exact same thing: display a NASA image), as well as find a few stack overflow answers but none could help because they are either outdated or they do things differently than what I need.

So, I would like to ask the community to provide the Swift 4 code for the these problems:

1. Convert data from url into a Dictionary
2. Use key:value pair from dict to get url to display an image

If it is not too much already, I would also like to ask for detailed descriptions alongside the code because I would like the answer to be the one comprehensive "tutorial" for this task that I believe is currently not available anywhere.

Thank you!

Upvotes: 2

Views: 18499

Answers (8)

Xingdong Cai
Xingdong Cai

Reputation: 1

Update for Xcode 13.3 , Swift 5

To load the Image asynchronously from a URL string, use this extension:

extension UIImageView {

public func getImageFromURLString(imageURLString: String) {
    guard let imageURL = URL(string: imageURLString) else { return}
    Task {
        await requestImageFromURL(imageURL)
    }
}

private func requestImageFromURL(_ imageURL: URL) async{
    let urlRequest = URLRequest(url: imageURL)
    do {
        let (data, response) = try await URLSession.shared.data(for: urlRequest)
        
        if let httpResponse = response as? HTTPURLResponse{
            if httpResponse.statusCode == 200{
                print("Fetched image successfully")
            }
        }
        // Loading the image here
        self.image = UIImage(data: data)
    } catch let error {
        print(error)
    }
}
}

Usage:

imageView.getImageFromURLString(imageURLString: "https://apod.nasa.gov/apod/image/1811/hillpan_apollo15_4000.jpg")

Upvotes: 0

Mickael Belhassen
Mickael Belhassen

Reputation: 3342

You can use this extension

extension UIImage {

    public static func loadFrom(url: URL, completion: @escaping (_ image: UIImage?) -> ()) {
        DispatchQueue.global().async {
            if let data = try? Data(contentsOf: url) {
                DispatchQueue.main.async {
                    completion(UIImage(data: data))
                }
            } else {
                DispatchQueue.main.async {
                    completion(nil)
                }
            }
        }
    }

}

Using

guard let url = URL(string: "http://myImage.com/image.png") else { return }

UIImage.loadFrom(url: url) { image in
    self.photo.image = image
}

Upvotes: 4

arvinq
arvinq

Reputation: 701

I have just extended on vadian's answer, separated some concerns to clearly understand the basics. His answer should suffice.

First, you have to build your structure. This will represent the JSON structure you retrieved from the webservice.

struct Item: Codable {
    let url, hdurl : URL,
    let copyright, explanation, media_type, service_version, title : String
}

Then make you request methods. I usually create a separate file for it. Now, vadian mentioned about completion handlers. These are represented by escaping closures. Here, closure ()-> is passed on both functions and called having the decoded data as argument. 

struct RequestCtrl {

    func fetchItem(completion: @escaping (Item?)->Void) {

         let url = URL(string: "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")!
         //URLSessionDataTask handles the req and returns the data which you will decode based on the Item structure we defined above.
         let task = URLSession.shared.dataTask(with: url) { (data, _, _) in 
             let jsonDecoder = JSONDecoder()
             if let data = data,
                let item = try? jsonDecoder.decode(Item.self, from: data){
                //jsonDecoder requires a type of our structure represented by .self and the data from the request.  
                completion(item)
             } else {
                 completion(nil)
             }
          }
         task.resume()
    }


    func fetchItemPhoto(usingURL url: URL, completion: @escaping (Data?)-> Void) {
         let task = URLSession.shared.dataTask(with: url) { (data, _, _) in
            if let data = data { completion(data) } else { completion(nil) }
          }
         task.resume()
    }
}

Now in you ViewController, call your request and handle the execution of your closure.

  class ViewController: UIViewController {

      let requestCtrl = RequestCtrl()

      override func viewDidLoad() {
         super.viewDidLoad()

         requestCtrl.fetchItem { (fetchedItem) in
            guard let fetchedItem = fetchedItem else { return }
            self.getPhoto(with: fetchedItem)
         }

      }

      func getPhoto(with item: Item) {
           requestCtrl.fetchItemPhoto(usingURL: item.url) { (fetchedPhoto) in
                 guard let fetchedPhoto = fetchedPhoto else { return }
                 let photo = UIImage(data: fetchedPhoto)
                  //now you have a photo at your disposal 
           }
      }
  }

These are not the best of practices since I am also still learning, so by all means do some research on topics especially closures, ios concurrency and URLComponents on Apple's documentation :)

Upvotes: 1

Harsh Srivastava
Harsh Srivastava

Reputation: 359

Create an UIIimageView Extension and the following code 

extension UIImageView {
public func imageFromServerURL(urlString: String) {
    self.image = nil
    let urlStringNew = urlString.replacingOccurrences(of: " ", with: "%20")
    URLSession.shared.dataTask(with: NSURL(string: urlStringNew)! as URL, completionHandler: { (data, response, error) -> Void in

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

    }).resume()
}}

and 

self.UploadedImageView.imageFromServerURL(urlString: imageURLStirng!)

Upvotes: 1

Swati Desai
Swati Desai

Reputation: 45

First add the pod in Podfile pod 'Alamofire', pod 'AlamofireImage' you can check this link for install pods => https://cocoapods.org/pods/AlamofireImage

// Use this function for load image from URL in imageview

imageView.af_setImage(
    withURL: url,
    placeholderImage: placeholderImage //its optional if you want to add placeholder
)

Check this link for method of alamofireImage https://github.com/Alamofire/AlamofireImage/blob/master/Documentation/AlamofireImage%203.0%20Migration%20Guide.md

Upvotes: 0

Isha Patel
Isha Patel

Reputation: 29

you need to convert url into string and data to add in imageview

let imageURL:URL=URL(string: YourImageURL)!
let data=NSData(contentsOf: imageURL)
Yourimage.image=UIImage(data: data! as Data)

Upvotes: 0

Stanislau Baranouski
Stanislau Baranouski

Reputation: 1451

Since image loading is a trivial and at the same time task which could be implemented in many different ways, I would recommend you to not "reinvent the wheel" and have a look to an image loading library such as Nuke, since it already covers most of the cases you might need during your development process.

It allows you to load and show image asynchronously into your view, using simple api:

Nuke.loadImage(with: url, into: imageView)

And also if you need - to specify how image should be loaded and presented:

let options = ImageLoadingOptions(
placeholder: UIImage(named: "placeholder"),
failureImage: UIImage(named: "failure_image"),
contentModes: .init(
    success: .scaleAspectFill,
    failure: .center,
    placeholder: .center
)
)
Nuke.loadImage(with: url, options: options, into: imageView)

Upvotes: 1

vadian
vadian

Reputation: 285064

First of all I'm pretty sure that in half a year you will find Objective-C very complicated and difficult. 😉

Second of all even your ObjC code is discouraged. Don't load data from a remote URL with synchronous Data(contentsOf method. Regardless of the language use an asynchronous way like (NS)URLSession.

And don't use Foundation collection types NSArray and NSDictionary in Swift. Basically don't use NS... classes at all if there is a native Swift counterpart.

In Swift 4 you can easily decode the JSON with the Decodable protocol directly into a (Swift) struct,
the URL string can be even decoded as URL.

Create a struct 

struct Item: Decodable {
    // let copyright, date, explanation: String
    // let hdurl: String
    // let mediaType, serviceVersion, title: String
    let url: URL
}

Uncomment the lines if you need more than the URL.

And load the data with two data tasks.

let url = URL(string: "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")! 

let task = URLSession.shared.dataTask(with: url) { (data, _, error) in
    if let error = error { print(error); return }
    do {
       let decoder = JSONDecoder()
       // this line is only needed if all JSON keys are decoded
       decoder.keyDecodingStrategy = .convertFromSnakeCase
       let result = try decoder.decode(Item.self, from: data!)
       let imageTask = URLSession.shared.dataTask(with: result.url) { (imageData, _, imageError) in
           if let imageError = imageError { print(imageError); return }
           DispatchQueue.main.async {
               let apodImage = UIImage(data: imageData!)
               let apodView = UIImageView(image: apodImage)
               // do something with the image view
           }
       }
       imageTask.resume()
   } catch { print(error) }
}
task.resume()

Upvotes: 7

Related Questions