iOS开发：如何将API返回的字符串格式PNG路径加载到UITableViewCell的ImageView中？

Hey there! Let's get that PNG image loading working for your book list. The issue with your commented-out code is that UIImage(named:) is only meant for local images stored in your app's bundle—but your API is returning a remote network URL for the book cover. Here's how to fix this, with both native Swift solutions and a handy third-party shortcut:

Native Swift Implementation (No Third-Party Libraries) #

First, let's add a reusable image loading method to your CustomCell that handles network requests, UI updates on the main thread, and cell reuse (super important to avoid weird image glitches when scrolling!).

Step 1: Update Your CustomCell #

Add these properties and methods to your CustomCell class:

import UIKit

class CustomCell: UITableViewCell {
    @IBOutlet weak var bookTitle: UILabel!
    @IBOutlet weak var bookImage: UIImageView!
    
    // Track the active image task to cancel it when the cell is reused
    private var imageLoadTask: URLSessionDataTask?
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // Cancel any ongoing image load to prevent wrong images on reused cells
        imageLoadTask?.cancel()
        // Reset to a placeholder image while waiting for the new one
        bookImage.image = UIImage(named: "placeholder")
    }
    
    func loadBookImage(from urlString: String) {
        guard let imageURL = URL(string: urlString) else {
            // Handle invalid URL by showing a placeholder
            bookImage.image = UIImage(named: "placeholder")
            return
        }
        
        // Cancel previous task if the cell is being reused
        imageLoadTask?.cancel()
        
        // Start new network request
        imageLoadTask = URLSession.shared.dataTask(with: imageURL) { [weak self] data, _, error in
            guard let self = self else { return }
            
            // Check if the request was cancelled (no need to proceed)
            if let error = error as? URLError, error.code == .cancelled {
                DispatchQueue.main.async {
                    self.bookImage.image = UIImage(named: "placeholder")
                }
                return
            }
            
            // If we have valid image data, update the UI on the main thread
            if let imageData = data, let loadedImage = UIImage(data: imageData) {
                DispatchQueue.main.async {
                    self.bookImage.image = loadedImage
                }
            } else {
                // Show placeholder if image load fails
                DispatchQueue.main.async {
                    self.bookImage.image = UIImage(named: "placeholder")
                }
            }
        }
        
        imageLoadTask?.resume()
    }
}

Step 2: Update cellForRowAt #

Simplify your table view data source method to use the new loadBookImage method:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = Bundle.main.loadNibNamed("CustomCell", owner: self, options: nil)?.first as? CustomCell else {
        // Fallback to default cell if custom cell can't be loaded
        return UITableViewCell()
    }
    
    // Get the current book (simplified your original logic)
    let currentBook = filteredBook.isEmpty ? contents[indexPath.row] : filteredBook[indexPath.row]
    
    cell.bookTitle.text = currentBook.name
    // Load the remote image
    cell.loadBookImage(from: currentBook.imageUrl)
    
    return cell
}

Third-Party Shortcut (Kingfisher) #

If you want to skip writing all that network code (and get built-in caching, error handling, and reuse support), use Kingfisher—a popular iOS image loading library.

Step 1: Install Kingfisher #

You can add it via Swift Package Manager or CocoaPods. For Swift Package Manager, add this URL in Xcode: https://github.com/onevcat/Kingfisher.git

Step 2: Load Images with One Line #

Update your cellForRowAt method like this:

import Kingfisher

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = Bundle.main.loadNibNamed("CustomCell", owner: self, options: nil)?.first as? CustomCell else {
        return UITableViewCell()
    }
    
    let currentBook = filteredBook.isEmpty ? contents[indexPath.row] : filteredBook[indexPath.row]
    
    cell.bookTitle.text = currentBook.name
    // Load image with placeholder and automatic handling of reuse/caching
    cell.bookImage.kf.setImage(
        with: URL(string: currentBook.imageUrl),
        placeholder: UIImage(named: "placeholder")
    )
    
    return cell
}

Key Notes #

• Always update UI elements (like UIImageView) on the main thread—network requests run in background threads, so we use DispatchQueue.main.async for UI updates.
• Add a placeholder image to improve user experience while images load or if they fail to load.
• Handling cell reuse is crucial to prevent incorrect images from appearing when scrolling quickly.

内容的提问来源于stack exchange，提问作者Şevval Tıraşlar