ImageView Workshop 2

In this workshop you learn how to fetch an image from a remote server, then display it in an imageView control. You will use the same iOS project you downloaded in the UIImageView control: Workshop 1.

Display an Image From a Remote Server

The process of displaying an image fetched from a remote server in an ImageView control goes something like this:

  1. Assign the image’s web address in a NSString object
  2. Fetch the image from the server and place it in an image object
  3. Display the image fetched from the server, in an ImageView control.

Say we have an image named, flowers.jpg at this web address:
http://goo.gl/J7yOD

Now, to display it in the FirstViewController’s ImageView control, we’d have to enter code shown below in the showImageButtonTapped method.

// Assign the image's web address in a NSString object
NSString *birdPhoto = @"http://goo.gl/J7yOD";

// Fetch the image from the server and place it in an image object
UIImage *imageFromServer = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:birdPhoto]]];

// Display the image fetched from the server, in an ImageView control
self.imageView.image = imageFromServer;

Output

imageview-fig03
Wow! See how easy it is to display an image from a remote web server, in an ImageView control.