iOS开发：如何在UITableView中展示JSON返回的图片

首先，你当前的代码存在一个关键问题：使用全局的getData实例来存储每个cell的数据，这会因为UITableView的cell复用机制导致数据混乱——所有cell都会共享同一个实例的descriptionn和image属性，滚动时会出现内容错位。我们先从重构数据模型开始：

1. 创建合适的数据模型类 #

首先定义一个NewsItem结构体来存储单条新闻的所有属性，包括拼接好的完整图片URL：

struct NewsItem {
    let descriptionText: String
    let fullImageURL: URL?
    
    // 从JSON字典初始化，同时拼接基础路径和图片文件名
    init(from jsonDict: [String: Any], baseImageURL: String) {
        // 解析描述字段，为空时使用默认值
        self.descriptionText = jsonDict["description"] as? String ?? ""
        
        // 解析图片文件名
        let imageFileName = jsonDict["images"] as? String ?? ""
        
        // 拼接完整URL，自动处理路径中的斜杠问题
        let trimmedBaseURL = baseImageURL.trimmingCharacters(in: CharacterSet(charactersIn: "/"))
        let trimmedImageName = imageFileName.trimmingCharacters(in: CharacterSet(charactersIn: "/"))
        let fullURLString = "\(trimmedBaseURL)/\(trimmedImageName)"
        
        self.fullImageURL = URL(string: fullURLString)
    }
}

2. 解析JSON为数据模型数组 #

在你获取到JSON响应后，把data数组转换成[NewsItem]数组，方便后续在TableView中使用：

// 声明全局或类级别的数组存储新闻数据
var newsItems: [NewsItem] = []

// 假设你在网络请求的回调中解析JSON
func parseJSON(_ responseJSON: Any?) {
    guard let jsonDict = responseJSON as? [String: Any],
          let dataArray = jsonDict["data"] as? [[String: Any]],
          let baseImageURL = jsonDict["newsurl"] as? String else {
        print("JSON解析失败")
        return
    }
    
    // 转换所有数据为NewsItem模型
    newsItems = dataArray.map { NewsItem(from: $0, baseImageURL: baseImageURL) }
    
    // 刷新TableView
    DispatchQueue.main.async {
        yourTableView.reloadData()
    }
}

3. 在TableView中加载并展示图片 #

现在修改cellForRowAt方法，使用数据模型数组来配置cell，同时异步加载图片（处理cell复用问题）：

方法一：原生URLSession实现 #

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "discoveryNewscell") as! DiscoveryNewsTableViewCell
    let currentNews = newsItems[indexPath.row]
    
    // 设置新闻标题
    cell.newsTitle.text = currentNews.descriptionText
    
    // 设置占位图（可选，提升用户体验）
    cell.sneakerImageView.image = UIImage(named: "placeholder_image")
    
    // 检查是否有有效的图片URL
    guard let imageURL = currentNews.fullImageURL else {
        return cell
    }
    
    // 异步加载图片，避免阻塞主线程
    URLSession.shared.dataTask(with: imageURL) { [weak cell] data, _, error in
        guard let imageData = data, error == nil, let loadedImage = UIImage(data: imageData) else {
            DispatchQueue.main.async {
                // 加载失败时设置错误占位图
                cell?.sneakerImageView.image = UIImage(named: "error_placeholder")
            }
            return
        }
        
        // 回到主线程更新UI，同时验证cell是否仍对应当前indexPath（解决复用错位）
        DispatchQueue.main.async {
            if let cellIndexPath = tableView.indexPath(for: cell!), cellIndexPath == indexPath {
                cell?.sneakerImageView.image = loadedImage
            }
        }
    }.resume()
    
    return cell
}

方法二：使用第三方库（推荐） #

如果不想自己处理图片缓存、复用等细节，推荐使用成熟的图片加载库SDWebImage，它能帮你简化代码并优化性能：

1. 先通过CocoaPods或Swift Package Manager导入SDWebImage
2. 修改cellForRowAt：

import SDWebImage

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "discoveryNewscell") as! DiscoveryNewsTableViewCell
    let currentNews = newsItems[indexPath.row]
    
    cell.newsTitle.text = currentNews.descriptionText
    
    // 一行代码完成图片加载、占位图、缓存处理
    if let imageURL = currentNews.fullImageURL {
        cell.sneakerImageView.sd_setImage(with: imageURL, placeholderImage: UIImage(named: "placeholder_image"))
    } else {
        cell.sneakerImageView.image = UIImage(named: "placeholder_image")
    }
    
    return cell
}

关键说明 #

• 避免使用全局实例存储单条cell的数据，改用数组存储每个item的独立模型，这是解决TableView复用问题的核心。
• 图片加载必须异步进行，否则会阻塞主线程导致界面卡顿。
• 使用占位图可以提升用户体验，避免加载过程中出现空白。

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