iOS开发：SDWebImage加载图片后详情页显示错误求助

一、先搞定“cannot assign UIImage to [UIImage]”错误 #

说白了就是你把单张图片直接赋值给图片数组了，这肯定不行。数组是用来存批量元素的，得把图片添加进去，不是直接替换整个数组。

错误写法示例：

// 假设imagesArray是[UIImage]类型
imagesArray = downloadedImage // 错在这：单张图不能直接赋值给数组

正确操作是用append把图片加到数组末尾：

imagesArray.append(downloadedImage)

如果需要按特定位置插入，就用insert：

imagesArray.insert(downloadedImage, at: 目标索引位置)

注意：数组得是可变的（用var声明，别用let），而且异步下载完图片后，一定要切回主线程更新数组和UI，否则容易出现数据不一致的问题。

二、解决详情页总是显示最后一张图的问题 #

这大概率是异步下载时的变量捕获坑，或者图片和数据源没对应上导致的，给你几个具体解决方向：

1. 把图片直接存在对应的数据模型里，别单独搞数组 #

比如你有个音频数据模型，直接给它加个图片属性，这样每个音频条目对应自己的图片，绝对不会乱：

struct AudioModel {
    var title: String
    var image: UIImage? // 专门存这个音频对应的图片
    // 其他属性比如音频地址、ID等
}

// 下载图片时，找到对应的模型赋值
let storageRef = Storage.storage().reference().child("images/\(audioItem.id).png")
storageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
    if let data = data, let image = UIImage(data: data) {
        DispatchQueue.main.async {
            // 找到当前音频在数组里的位置，把图片塞进去
            if let index = self.audioItems.firstIndex(where: { $0.id == audioItem.id }) {
                self.audioItems[index].image = image
                self.tableView.reloadRows(at: [IndexPath(row: index, section: 0)], with: .automatic)
            }
        }
    }
}

2. 循环下载时别直接用循环变量，容易踩坑 #

要是你在循环里批量下载图片，别用for i in 0..<xxx这种写法，闭包会捕获变量的引用，等异步下载完成时，循环早就跑完了，i已经变成最后一个索引，结果所有图片都往最后一个位置塞。

错误写法：

for i in 0..<audioItems.count {
    let storageRef = Storage.storage().reference().child("images/\(audioItems[i].id).png")
    storageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
        // 这里的i已经是最后一个值了，全给最后一个位置赋值
        self.imagesArray[i] = UIImage(data: data!)
    }
}

正确写法，用enumerated()拆出索引和元素，闭包会捕获当前的index，就不会乱了：

for (index, item) in audioItems.enumerated() {
    let storageRef = Storage.storage().reference().child("images/\(item.id).png")
    storageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
        guard let data = data, let image = UIImage(data: data) else { return }
        DispatchQueue.main.async {
            self.audioItems[index].image = image
            self.tableView.reloadRows(at: [IndexPath(row: index, section: 0)], with: .automatic)
        }
    }
}

3. 跳转详情页时，传选中行对应的图片 #

在点击cell的方法里，直接拿选中行对应模型的图片，别从单独的数组里取：

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let selectedAudio = audioItems[indexPath.row]
    guard let targetImage = selectedAudio.image else { return }
    let playerVC = AudioPlayerViewController()
    playerVC.displayImage = targetImage // 把选中的图片传给详情页
    navigationController?.pushViewController(playerVC, animated: true)
}

三、额外优化建议 #

可以用第三方图片库比如Kingfisher来处理Firebase图片的下载和缓存，省得自己写一堆异步代码，还能自动缓存，下次不用重新下载：

// 直接给cell的imageView加载图片，一行代码搞定
cell.imageView.kf.setImage(with: storageRef)

内容的提问来源于stack exchange，提问作者Vugar