iOS开发求助：如何将URL图片加载到UITableView单元格？已实现文本加载

Hey there! Let's get to the bottom of why your images aren't showing up in your UITableView cells—since you've already got the text working, we're close to fixing this. Here are the most common issues and how to resolve them:

1. Verify Your Image URL is Valid #

First things first: double-check that the image URL you're using is correct. Try pasting it into a web browser—if it doesn't load there, it won't load in your app either. Common issues here include typos, missing http:///https://, or the image being removed from the server.

Also, if your URL uses http instead of https, iOS blocks non-secure network requests by default. To fix this temporarily (for testing), add this to your Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

(Note: For production apps, always use HTTPS URLs to avoid this step and keep your app secure.)

2. Update UI on the Main Thread #

Network requests run in background threads, but UI updates must happen on the main thread. If you're setting the image without switching back to the main thread, the cell won't refresh to show it.

3. Fix Cell Reuse Issues #

UITableView reuses cells to save memory, which means if you don't handle image loading correctly, you might see wrong images or no images when scrolling. Always clear old images before starting a new download, and verify the cell still corresponds to the correct index path when the download finishes.

Full Working Example #

Here's a revised version of your cellForRowAt method that addresses all these issues:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return posts.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier:"searchCell", for: indexPath) as! CustomTableViewCell
    
    // Set your text content first (you had this part working)
    let currentPost = posts[indexPath.row]
    cell.titleField?.text = currentPost.title
    
    // Set a placeholder image to avoid empty spaces while loading
    cell.postImageView.image = UIImage(named: "placeholder-image")
    
    // Validate the image URL
    guard let imageURL = URL(string: currentPost.imageUrl) else {
        print("Invalid image URL for row \(indexPath.row)")
        return cell
    }
    
    // Async download the image
    URLSession.shared.dataTask(with: imageURL) { [weak cell] data, response, error in
        // Handle errors
        if let error = error {
            print("Image download error: \(error.localizedDescription)")
            return
        }
        
        // Convert data to UIImage
        guard let imageData = data, let downloadedImage = UIImage(data: imageData) else {
            print("Failed to convert data to image for row \(indexPath.row)")
            return
        }
        
        // Switch to main thread to update UI
        DispatchQueue.main.async {
            // Make sure the cell is still associated with the correct index path
            guard let cellIndexPath = tableView.indexPath(for: cell!), cellIndexPath == indexPath else {
                return
            }
            cell?.postImageView.image = downloadedImage
        }
    }.resume()
    
    return cell
}

Bonus: Use a Image Loading Library (Easier for Beginners) #

If you want to skip the manual setup and avoid common pitfalls, use a popular library like Kingfisher. It handles caching, async loading, and cell reuse automatically. After installing it, you can replace all the image loading code with one line:

cell.postImageView.kf.setImage(with: imageURL, placeholder: UIImage(named: "placeholder-image"))

That should get your images showing up properly! Let me know if you run into any other snags.

内容的提问来源于stack exchange，提问作者Alex. E