Populating Tableviews with Images in Firebase

Question

I recently asked this question: Populating a UITableView in Firebase a Set Number of Cells at a time

But through the discussion I realized that the question was actually two questions, so I'm going to start a second thread for the second question:

Is there a way people generally populate tableviews of images from large data sets using Firebase?

Below is the code I'm using for retrieving images. The images are base64 encoded NSStrings.

NSString* profPicString= [child.value objectForKey: @"profilePicture"];
    NSData *dataFromBase64=[NSData base64DataFromString:profPicString];
    UIImage *profPicImage = [[UIImage alloc]initWithData:dataFromBase64];
    item.profilePicture = profPicImage;

The images, however, take a long time to download. A tableview of just 10 images will take 5 or 10 seconds to load. If it's like this with 10 images, it will be truly glacial with hundreds or thousands.

I doubt I'm the first person to encounter this issue, and I was wondering if there's a better/more efficient way of doing it?

Thanks for the help!

Async downloads https://www.youtube.com/watch?v=gyluPwsPZ8c – DogCoffee Dec 22 '15 at 05:59 — DogCoffee, Dec 22 '15 at 05:59

David East · Accepted Answer · 2015-12-22T15:31:49.787

If you're going to store your images as base64 encoded strings, store them in a separate location in the Firebase database.

{
   "pokemon": {
      "001": {
         "name": "Bulbasaur"
      },
      "002": {
         "name": "IvySaur"
      }
   },
   "images": {
      "001": "big-ole-base64-string",
      "002": "big-ole-base64-string"
   }
}

This way you can load the main data without needed to pull down the images.

Now when you load your data for your UITableView, create a listener for the main set of data, /pokemon in this case.

Then when you get to tableView(_:cellForRowAtIndexPath), create a one-time listener to grab the image.

This example is in Swift, but you can convert to Objective-C.

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

  let pokeSnap = pokemonSnaps[indexPath.item]

  let imageRef = rootRef.childByAppendingPath("images").childByAppendingPath(pokeSnap.key)

  imageRef.observeSingleEventOfType(.Value) { (imageSnap: FDataSnapshot!) in
    let base64String = imageSnap.value as! String
    let decodedData = NSData(base64EncodedString: base64String, options: NSDataBase64DecodingOptions(rawValue: 0))
    let image = UIImage(data: decodedData!)
    cell.pokeImage.image = image
  }

  return cell   
}

The beauty of this method is that you only load the images when needed, not with the main set of data.

Check out this repo of mine that implements this technique.

This is a great idea! Is there an objective c repo for this? @DavidEast — Philip Sopher, Dec 22 '15 at 15:59
@PhilipSopher No, I just made it this morning, but it's a small amount of code so they Obj-C conversion should be fairly simple. — David East, Dec 22 '15 at 16:08
Thanks @DavidEast! This is so much faster. I was just able to implement it successfully! — Philip Sopher, Dec 22 '15 at 17:37

score 2 · Answer 2 · answered May 22 '16 at 16:41

The new recommended way for doing this is to use Firebase Storage, the new File and Image storage solution for Firebase. You can use this in conjunction with something like SDWebImage to display the images you've uploaded to Firebase Storage.

We'll update all of our samples/repos with this information shortly :)

Populating Tableviews with Images in Firebase

2 Answers2