SwiftUI中QLThumbnailGenerator生成的缩略图无法在界面显示

缩略图无法显示是异步逻辑使用错误+视图未触发刷新导致的：

• QLThumbnailGenerator的generateRepresentations是异步方法，回调在缩略图生成完成后才会执行，但你写的generateThumbnailRepresentations是同步返回值的函数：函数执行时先初始化了空白UIImage，不等异步请求完成就立刻把空白图包装成Image返回给SwiftUI渲染，此时界面拿到的是空图。
• 异步回调执行时确实拿到了生成好的缩略图，但此时函数早已执行完毕，你修改的只是函数内的局部变量，不会触发SwiftUI的视图重绘机制，界面永远保留最开始渲染的空白图。
• 断点调试时程序执行被暂停，你看到回调里图片赋值成功是因为断点拉长了执行时序，正常运行时回调触发时机远晚于视图首次渲染的时间点，所以看不到图片。

原有问题代码 #

视图调用代码 #

generateThumbnailRepresentations(url: currentFile.localPath)
    .resizable()
    .scaledToFit()
    .frame(width: 60, height: 100)
    .aspectRatio(contentMode: .fill)

错误的缩略图生成实现 #

func generateThumbnailRepresentations(url: String) -> Image {
        let pathURL = URL(fileURLWithPath: url)
        var image: UIImage = UIImage()
        // 配置请求参数
        let size: CGSize = CGSize(width: 60, height: 100)
        let scale = UIScreen.main.scale
    
    // 创建缩略图请求
    let request = QLThumbnailGenerator.Request(fileAt: pathURL,
                                               size: size,
                                               scale: 1.0,
                                               representationTypes: .thumbnail)
    
    // 发起异步生成请求
    let generator = QLThumbnailGenerator.shared
    generator.generateRepresentations(for: request) { (thumbnail, type, error) in
        DispatchQueue.main.async {
            if thumbnail == nil || error != nil {
                print("error \(error)")
            } else {
                image = thumbnail?.uiImage ?? UIImage(systemName: "photo")!
                print("foo")
            }
        }
    }
    // 直接返回初始的空白图
    return Image(uiImage: image)
}

修复方案 #

不要用同步返回Image的方式实现异步加载逻辑，改用SwiftUI的状态变量持有图片，加载完成后更新状态自动触发视图重绘：

1. 封装独立的缩略图视图，内部管理加载状态

import SwiftUI
import QuickLook

struct FileThumbnailView: View {
    let localPath: String
    let size: CGSize
    @State private var loadedImage: UIImage = UIImage(systemName: "photo")!
    
    var body: some View {
        Image(uiImage: loadedImage)
            .resizable()
            .scaledToFit()
            .frame(width: size.width, height: size.height)
            .aspectRatio(contentMode: .fill)
            .onAppear(perform: loadThumbnail)
    }
    
    private func loadThumbnail() {
        let fileURL = URL(fileURLWithPath: localPath)
        let request = QLThumbnailGenerator.Request(
            fileAt: fileURL,
            size: size,
            scale: UIScreen.main.scale,
            representationTypes: .thumbnail
        )
        
        QLThumbnailGenerator.shared.generateRepresentations(for: request) { thumbnail, _, error in
            DispatchQueue.main.async {
                guard let generatedImg = thumbnail?.uiImage, error == nil else {
                    print("缩略图生成失败: \(error?.localizedDescription ?? "未知错误")")
                    return
                }
                loadedImage = generatedImg
            }
        }
    }
}

2. 调用时直接使用封装好的视图即可

FileThumbnailView(
    localPath: currentFile.localPath,
    size: CGSize(width: 60, height: 100)
)

内容的提问来源于stack exchange，提问作者Ufuk Köşker