在 Firebase 中使用图像填充表格视图答案

【问题标题】：Populating Tableviews with Images in Firebase在 Firebase 中使用图像填充表格视图
【发布时间】：2016-03-28 07:01:37
【问题描述】：

我最近问了这个问题：Populating a UITableView in Firebase a Set Number of Cells at a time

但通过讨论我意识到这个问题实际上是两个问题，所以我要开始第二个问题的第二个线程：

人们有没有一种方法通常使用 Firebase 从大型数据集中填充图像的表格视图？

以下是我用于检索图像的代码。图像是 base64 编码的 NSStrings。

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

但是，图像需要很长时间才能下载。只有 10 个图像的 tableview 将需要 5 或 10 秒才能加载。如果是这样的 10 张图片，那将是真正的冰河。

我怀疑我是第一个遇到这个问题的人，我想知道是否有更好/更有效的方法来解决这个问题？

感谢您的帮助！

【问题讨论】：

异步下载youtube.com/watch?v=gyluPwsPZ8c

标签： objective-c uitableview firebase data-retrieval

【解决方案1】：

如果您要将图像存储为 base64 编码字符串，请将它们存储在 Firebase 数据库中的单独位置。

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

这样你就可以加载主要数据而不需要拉下图片。

现在，当您为 UITableView 加载数据时，为主要数据集创建一个侦听器，在本例中为 /pokemon。

然后当您到达tableView(_:cellForRowAtIndexPath) 时，创建一个一次性侦听器来抓取图像。

这个例子是用 Swift 编写的，但是你可以转换成 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   
}

这种方法的美妙之处在于您只在需要时加载图像，而不是主要数据集。

Check out this repo of mine that implements this technique.

【讨论】：

这是个好主意！这有一个客观的c repo吗？ @DavidEast
@PhilipSopher 不，我今天早上才做的，但是代码量很小，所以它们的 Obj-C 转换应该相当简单。
感谢@DavidEast！这要快得多。我只是能够成功实现它！

【解决方案2】：

推荐的新方法是使用 Firebase Storage，这是 Firebase 的新文件和图像存储解决方案。您可以将其与 SDWebImage 之类的内容结合使用，以显示您已上传到 Firebase 存储的图像。

我们很快就会用这些信息更新我们所有的示例/repos :)

【讨论】：