SwiftUI中ImageRenderer无法加载SDWebImageView网络图片问题

问题现象 #

视图快照捕获功能其余正常，但使用SDWebImageView加载的网络图片无法在快照中显示。

相关代码 #

渲染代码 #

@MainActor func render() {
    let renderer = ImageRenderer(content: card())
    renderer.scale = displayScale
    if let uiImage = renderer.uiImage {
        renderedImage = Image(uiImage: uiImage)
    }
}

图片分享代码 #

ShareLink("Export", item: renderedImage, preview: SharePreview(Text("Share Resolution image"), image: renderedImage))

问题原因 #

ImageRenderer执行快照时，SDWebImageView的网络图片可能还未完成本地缓存或异步加载，SwiftUI的快照渲染机制无法捕获未加载完成的异步图片内容，导致快照中图片缺失。

解决方案 #

方案1：监听图片加载完成后再触发快照 #

如果你的card()视图中用UIViewRepresentable包装了SDWebImageView，可在包装类中添加加载完成回调，确保图片加载完毕再执行快照：

class SDWebImageWrapper: UIViewRepresentable {
    var url: URL?
    var onImageLoaded: (() -> Void)?
    
    func makeUIView(context: Context) -> SDWebImageView {
        let imageView = SDWebImageView()
        loadImage(for: imageView)
        return imageView
    }
    
    func updateUIView(_ uiView: SDWebImageView, context: Context) {
        loadImage(for: uiView)
    }
    
    private func loadImage(for imageView: SDWebImageView) {
        imageView.sd_setImage(with: url) { [weak self] image, _, _, _ in
            if image != nil {
                self?.onImageLoaded?()
            }
        }
    }
}

在视图中监听加载完成信号，再调用快照方法：

// 示例：用PassthroughSubject传递加载完成信号
let imageLoadedSignal = PassthroughSubject<Void, Never>()

// 在SDWebImageWrapper的onImageLoaded中发送信号
onImageLoaded: {
    imageLoadedSignal.send()
}

// 接收信号后执行快照
.onReceive(imageLoadedSignal) {
    render()
}

方案2：直接获取SDWebImage缓存的图片再渲染 #

跳过视图层级的异步加载，直接用SDWebImage获取本地缓存或已下载的图片，将其转为SwiftUI的Image后再进行快照：

// 传入目标图片URL
SDWebImageManager.shared.loadImage(with: targetImageURL, options: .highPriority) { [weak self] image, _, _, _, finished, _ in
    guard let image = image, finished else { return }
    DispatchQueue.main.async {
        // 将获取到的UIImage传入card()视图替换原SDWebImageView
        self?.cachedImage = Image(uiImage: image)
        self?.render()
    }
}

方案3：延迟触发快照（临时调试方案） #

若仅用于快速验证，可在调用render()前添加固定延迟，给图片足够的加载时间：

DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
    render()
}

注意：该方案稳定性差，不建议在生产环境使用。

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