SwiftUI：解决AsyncImage自定义缓存的decodeImageImp失败警告

警告原因分析 #

callDecodeImage:2005: *** ERROR: decodeImageImp failed - NULL _blockArray警告通常和图片解码阶段的线程竞争或缓存对象的内存管理异常有关：

• 当前缓存直接存储SwiftUI的Image视图对象，而Image依赖渲染上下文，长期持有可能导致底层图片数据被提前释放，触发解码失败。
• 静态字典ImageCache.cache无线程保护，异步加载时多线程读写会引发数据竞争，破坏图片解码所需的内部数据结构。

分步解决方案 #

1. 修复缓存的线程安全问题 #

给ImageCache添加线程锁，避免多线程读写冲突：

fileprivate class ImageCache {
    static private var cache: [URL: UIImage] = [:]
    static private let lock = NSLock() // 线程锁
    
    static subscript(url: URL?) -> UIImage? {
        get {
            guard let url else { return nil }
            lock.lock()
            defer { lock.unlock() }
            return cache[url]
        }
        set {
            guard let url else { return }
            lock.lock()
            defer { lock.unlock() }
            cache[url] = newValue
        }
    }
}

2. 缓存底层图片数据而非SwiftUI的Image视图 #

替换缓存对象为UIImage（UIKit）/NSImage（AppKit），这类对象直接持有图片像素数据，避免上下文依赖问题：
首先实现Image转UIImage的扩展：

extension Image {
    func asUIImage() -> UIImage {
        let controller = UIHostingController(rootView: self)
        controller.view.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        return controller.view.asImage()
    }
}

extension UIView {
    func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
            layer.render(in: rendererContext.cgContext)
        }
    }
}

然后修改CacheAsyncImage的缓存逻辑：

private func cacheAndRender(phase: AsyncImagePhase) -> some View {
    if case .success(let image) = phase {
        ImageCache[url] = image.asUIImage()
    }
    return contentPhase?(phase)
}

private func cacheAndRender(image: Image) -> some View {
    ImageCache[url] = image.asUIImage()
    return contentImage?(image)
}

// 修改body中的缓存读取逻辑
var body: some View {
    if let cachedUIImage = ImageCache[url] {
        let cachedImage = Image(uiImage: cachedUIImage)
        if contentPhase != nil {
            contentPhase?(.success(cachedImage))
        } else if contentImage != nil {
            contentImage?(cachedImage)
        }
    } else {
        // 原AsyncImage加载逻辑不变
        if contentPhase != nil {
            AsyncImage(url: url,
                       scale: scale,
                       transaction: transaction ?? Transaction(),
                       content: { cacheAndRender(phase: $0) })
        } else if contentImage != nil && placeholder != nil {
            AsyncImage(url: url,
                       scale: scale,
                       content: { cacheAndRender(image: $0) },
                       placeholder: placeholder!)
        }
    }
}

3. 优化内存占用：添加缓存过期与清理机制 #

当前缓存无限增长易导致内存浪费，可添加缓存大小限制和过期清理：

fileprivate class ImageCache {
    static private var cache: [URL: (image: UIImage, timestamp: Date)] = [:]
    static private let lock = NSLock()
    static private let maxCacheSize: Int = 100 // 最大缓存图片数量
    static private let expirationTime: TimeInterval = 86400 // 24小时过期
    
    static subscript(url: URL?) -> UIImage? {
        get {
            guard let url else { return nil }
            lock.lock()
            defer { lock.unlock() }
            guard let entry = cache[url], Date().timeIntervalSince(entry.timestamp) < expirationTime else {
                cache.removeValue(forKey: url)
                return nil
            }
            return entry.image
        }
        set {
            guard let url, let image = newValue else { return }
            lock.lock()
            defer { lock.unlock() }
            cache[url] = (image: image, timestamp: Date())
            // 超过最大缓存数时删除最早的条目
            if cache.count > maxCacheSize {
                let oldestKey = cache.min { $0.value.timestamp < $1.value.timestamp }?.key
                if let key = oldestKey {
                    cache.removeValue(forKey: key)
                }
            }
        }
    }
}

SwiftUI异步图片加载与缓存的更佳方案 #

如果不想手动维护缓存，推荐结合URLSession原生缓存机制+轻量内存缓存：

1. 配置URLSession启用磁盘缓存：

let urlSession: URLSession = {
    let config = URLSessionConfiguration.default
    config.urlCache = URLCache(memoryCapacity: 10 * 1024 * 1024, diskCapacity: 50 * 1024 * 1024) // 10MB内存，50MB磁盘
    return URLSession(configuration: config)
}()

2. 在AsyncImage中使用自定义URLSession：

AsyncImage(url: url, urlSession: urlSession) { phase in
    // 自定义内容视图
}

3. 配合前面的线程安全内存缓存，实现二级缓存（内存+磁盘），既利用系统原生缓存管理，又提升读取速度。

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