iOS中CollectionView从API加载图片失败问题求助

核心错误分析 #

你的代码存在多个关键问题，导致图片无法加载：

1. 结构体与JSON结构不匹配：API返回的是单个对象（包含mandir、images等字段），但你用[Images].self解析数组；且Images结构体定义错误，有默认值导致解码失败，命名也不符合Swift规范。
2. 网络请求逻辑错误：在cellForItemAt里发起网络请求，会导致每个cell重复请求API，且cell未正确初始化就返回；强制解包url!会引发崩溃。
3. 图片加载方式错误：用Data(contentsOf:)同步加载图片会阻塞线程，且在后台线程直接操作UI元素。
4. 未初始化核心数据与cell：viewDidLoad里未发起初始网络请求，也未注册CollectionViewCell；数据源数组imageses类型错误。
5. URL格式问题：API返回的imageloc包含转义反斜杠\\，需要先清理才能生成有效URL。

修正后的完整代码 #

1. 修正结构体定义（匹配JSON结构）

import UIKit

// 对应API返回的顶层对象
struct TempleDarshan: Decodable {
    let mandir: String
    let images: [ImageItem] // 对应JSON里的images数组
}

// 对应每个图片项
struct ImageItem: Decodable {
    let imageloc: String
    let imageDimension: String
}

2. 修正ViewController逻辑

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    // 变量名遵循Swift小驼峰规范
    @IBOutlet weak var collectionView: UICollectionView!
    // 数据源改为存储图片项数组
    var imageItems = [ImageItem]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 注册cell（如果是Storyboard关联，确保cell的Identifier设置为"CollectionViewCell"）
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        collectionView.delegate = self
        collectionView.dataSource = self
        
        // 发起初始网络请求
        fetchDarshanImages()
    }
    
    // 单独封装网络请求逻辑
    private func fetchDarshanImages() {
        guard let url = URL(string: "http://swaminarayanwales.org.uk/DailyDarshan/ExportJsonV2.php?sMandir=Nairobi-Temple&Target=real&sm=sm") else {
            print("无效的API URL")
            return
        }
        
        URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
            guard let self = self else { return }
            if let error = error {
                print("网络请求错误: \(error.localizedDescription)")
                return
            }
            guard let data = data else {
                print("未获取到数据")
                return
            }
            
            do {
                // 解析单个顶层对象，而非数组
                let darshanData = try JSONDecoder().decode(TempleDarshan.self, from: data)
                self.imageItems = darshanData.images
                // 回到主线程刷新UI
                DispatchQueue.main.async {
                    self.collectionView.reloadData()
                }
            } catch {
                print("JSON解码错误: \(error.localizedDescription)")
            }
        }.resume()
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageItems.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // 正确复用cell
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as? CollectionViewCell else {
            return UICollectionViewCell()
        }
        
        let item = imageItems[indexPath.row]
        // 清理URL里的转义反斜杠
        let cleanedImageUrlString = item.imageloc.replacingOccurrences(of: "\\", with: "")
        guard let imageUrl = URL(string: cleanedImageUrlString) else {
            cell.imageView.image = nil // 可替换为默认占位图
            return cell
        }
        
        // 异步加载图片，避免阻塞主线程
        URLSession.shared.dataTask(with: imageUrl) { data, _, error in
            if let error = error {
                print("图片加载错误: \(error.localizedDescription)")
                return
            }
            guard let data = data, let image = UIImage(data: data) else { return }
            // 主线程更新UI，防止cell复用错位
            DispatchQueue.main.async {
                if collectionView.indexPath(for: cell) == indexPath {
                    cell.imageView.image = image
                }
            }
        }.resume()
        
        return cell
    }
}

3. 修正CollectionViewCell（规范命名）

import UIKit

class CollectionViewCell: UICollectionViewCell {
    // 变量名改为小驼峰
    @IBOutlet weak var imageView: UIImageView!
}

额外注意事项 #

• Storyboard配置：确保CollectionView的cell的Identifier设置为CollectionViewCell，且imageView已正确关联IBOutlet。
• 占位图优化：可以给imageView设置默认占位图，提升用户体验。
• 性能优化：建议使用第三方图片加载库（如Kingfisher、SDWebImage），自动处理缓存、复用、错误处理等逻辑，避免重复造轮子。
• HTTPS适配：当前API使用HTTP，在iOS 9+需要在Info.plist中配置NSAppTransportSecurity允许HTTP请求，或者建议服务端升级到HTTPS。

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