How to display the images from url in tableview in iPhone

Question

I am using the following code to display the images in the table view,

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [[xmlParser templates] count];
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    Temp *currentTemplate = [[xmlParser templates] objectAtIndex:indexPath.row];

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];

        CGRect contentNameLabelFrame = CGRectMake(64, 2, 250, 20);
        UILabel *contentNameLabelF = [[UILabel alloc] initWithFrame:contentNameLabelFrame];
        contentNameLabelF.tag = 0011;
        contentNameLabelF.font = [UIFont boldSystemFontOfSize:12];
        contentNameLabelF.text = @"Template Name:";
        contentNameLabelF.textColor = [UIColor orangeColor];
        [cell.contentView addSubview:contentNameLabelF];

        CGRect contentFrame = CGRectMake(115, 2, 250, 20);
        UILabel *contentLabel = [[UILabel alloc] initWithFrame:contentFrame];
        contentLabel.tag = 0012;
        contentLabel.font = [UIFont boldSystemFontOfSize:12];
        [cell.contentView addSubview:contentLabel];



        CGRect contentnumberofcontacts = CGRectMake(63, 20, 250, 13);
        UILabel *contentnumberofcontactsLabel = [[UILabel alloc] initWithFrame:contentnumberofcontacts];
        contentnumberofcontactsLabel.tag = 0013;
        contentnumberofcontactsLabel.font = [UIFont boldSystemFontOfSize:10];
        contentnumberofcontactsLabel.text = @"Image:";
        contentnumberofcontactsLabel.textColor = [UIColor brownColor];
        [cell.contentView addSubview:contentnumberofcontactsLabel];

        CGRect contentnumberFrame = CGRectMake(115, 20, 250, 13);
        UILabel *contentnumberLabel = [[UILabel alloc] initWithFrame:contentnumberFrame];
        contentnumberLabel.tag = 0014;
        contentnumberLabel.font = [UIFont systemFontOfSize:10];
        [cell.contentView addSubview:contentnumberLabel];


        CGRect contentstatus = CGRectMake(78, 35, 250, 10);
        UILabel *contentstatuslabel = [[UILabel alloc] initWithFrame:contentstatus];
        contentstatuslabel.tag = 0015;
        contentstatuslabel.font = [UIFont boldSystemFontOfSize:10];
        contentstatuslabel.text = @"Category:";
        contentstatuslabel.textColor = [UIColor grayColor];
        [cell.contentView addSubview:contentstatuslabel];

        CGRect statusFrame = CGRectMake(115, 35, 250, 10);
        UILabel *statusLabel = [[UILabel alloc] initWithFrame:statusFrame];
        statusLabel.tag = 0016;
        statusLabel.font = [UIFont systemFontOfSize:10];
        [cell.contentView addSubview:statusLabel];



    }

    UILabel *contentLabel = (UILabel *)[cell.contentView viewWithTag:0012];
    contentLabel.text = [currentTemplate templateName];

    UILabel *contentnumberLabel = (UILabel *)[cell.contentView viewWithTag:0014];
    contentnumberLabel.text = [currentTemplate imagePath];

    UILabel *statusLabel = (UILabel *)[cell.contentView viewWithTag:0016];
    statusLabel.text = [currentTemplate category];



    return  cell;
}


-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{
    return 75;
}

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{

}


- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    xmlParser = [[ViewController alloc] loadXMLByURL:@"http://www.xxxxx.net/xxxxx/xxxx.aspx?type=xxxxx&xxxx="];
}

-(id)loadXMLByURL:(NSString *)urlString
{
    _templates = [[NSMutableArray alloc] init];
    NSURL *url = [NSURL URLWithString:urlString];
    NSData *data = [[NSData alloc] initWithContentsOfURL:url];
    parser = [[NSXMLParser alloc] initWithData:data];
    parser.delegate = self;
    [parser parse];

    return self;
}

-(void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string
{
    currentNodeContent = (NSMutableString *) [string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
}

-(void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict
{
    if([elementName isEqualToString:@"template_maste"])
    {
        currentTemplate = [Temp alloc];
    }
    if ([elementName isEqualToString:@"img_path"])
    {
        currentTemplate = [Temp alloc];
        isStatus = YES;
    }
}

-(void)parser:(NSXMLParser *)parser didEndElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName
{
    if([elementName isEqualToString:@"Template_name"])
    {
        currentTemplate.templateName = currentNodeContent;
    }
    if([elementName isEqualToString:@"img_path"])
    {
        currentTemplate.imagePath = currentNodeContent;
    }
    if([elementName isEqualToString:@"Category"])
    {
        currentTemplate.category = currentNodeContent;
    }
    if([elementName isEqualToString:@"template_maste"])
    {
        [self.templates addObject:currentTemplate];
        currentTemplate = nil;
        currentNodeContent = nil;
    }
}

I am able to display the path of the image in the tableView, but i need to display the images in the tableView from the url.

I searched for the solution, but i was not able to get the solution,

Thanks in advance.

Answer 1

If you are using ASIHTTPRequest you can do this like so:

NSURL *url = [NSURL URLWithString:@"http://example.com/picture.png"];
__block ASIHTTPRequest *request = [ASIHTTPRequest requestWithURL:url];
[request setCompletionBlock:^{
    NSData *responseData = [request responseData];
    UIImage *img = [UIImage imageWithData:responseData];
    [self.myImageView setImage:img];
}];
[request startAsynchronous];

EDIT: I also suggest you to save downloaded images (with names like URL_MD5.png) on device and fetch them from Internet only if they missed in your cache. Also you could create a 'component' based on UIImageView that shows activity indicator (like ajax) until download complete. So you could add a method like loadImageFromUrl that will look image in the cache and asynchroniously load it if needed, store it to cache and show it after all.

Answer 2

Adding more to Teodor's answer, using AFNetworking framework will help your life. It works with block based methods. More helpful, it has AFImageRequestOperation, a specific class for downloading and processing images, and UIImageView+AFNetworking, that can help you even more loading remote images asynchronously.

Answer 3

I think what you are looking for is something like:

NSString *path = @"http://www.yoururl/images/yourimage.png";
NSURL *url = [NSURL URLWithString:path];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *img = [[[UIImage alloc] initWithData:data] autorelease];

UIImageView *imageView = [[[UIImageView alloc] initWithImage:img] autorelease];
imageView.frame = CGRectMake(0, 0, 44, 44);
[cell addSubview:imageView];

Answer 4

Once you get all the image URLs. Try the following code to display it!! :-)

NSString *imageStr = [imageURLArray objectAtIndex:indexPath.row];
NSString *trimmedString = [imageStr stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
NSString *string1=[trimmedString stringByReplacingOccurrencesOfString:@"/n" withString:@""];
NSURL *url = [NSURL URLWithString:string1];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *newImage = [UIImage imageWithData:data];
cell.imageView.image = newImage;

Answer 5

You gotta make a url request for allt he images' URLs. Instead of UILabel, put an UIImageView, and load image data from url response into the imageview.