SwiftUI中如何从Firebase Storage加载并显示图片？

你的代码里图片始终为nil的核心原因有两个：

1. sd_setImage是异步加载方法，在init中调用后不会立刻返回图片，此时SwiftUI渲染body时，imageView.image还没被赋值，自然为nil。
2. SwiftUI的View是值类型，你的imageView是结构体中的常量，即使后续图片加载完成，也不会触发视图的刷新逻辑，所以界面永远显示不了加载后的图片。

方案一：用UIViewRepresentable封装UIImageView（推荐） #

直接通过UIViewRepresentable将UIKit的UIImageView封装成SwiftUI的View，复用SDWebImage的异步加载逻辑，自动处理视图更新：

import SwiftUI
import FirebaseStorage
import FirebaseStorageUI

struct FirebaseStorageImageView: UIViewRepresentable {
    let storagePath: String
    let placeholderName: String
    
    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit // 根据需求调整内容模式
        return imageView
    }
    
    func updateUIView(_ uiView: UIImageView, context: Context) {
        let storageRef = Storage.storage().reference().child(storagePath)
        let placeholder = UIImage(named: placeholderName)
        uiView.sd_setImage(with: storageRef, placeholderImage: placeholder)
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        FirebaseStorageImageView(storagePath: "images/stars.jpg", placeholderName: "placeholder.jpg")
            .frame(width: 200, height: 200)
    }
}

这种方式的优势是无需手动管理异步状态，UIViewRepresentable会自动处理UIImageView的生命周期，图片加载完成后会自动更新视图。

方案二：用ObservableObject管理图片状态 #

通过ObservableObject封装图片加载逻辑，利用@Published属性触发SwiftUI视图刷新：

import SwiftUI
import FirebaseStorage
import FirebaseStorageUI

class ImageLoader: ObservableObject {
    @Published var image: UIImage?
    private let storagePath: String
    private let placeholderName: String
    
    init(storagePath: String, placeholderName: String) {
        self.storagePath = storagePath
        self.placeholderName = placeholderName
        loadImage()
    }
    
    private func loadImage() {
        let storageRef = Storage.storage().reference().child(storagePath)
        let placeholder = UIImage(named: placeholderName)
        // 先显示占位图
        self.image = placeholder
        
        // 获取Firebase Storage文件的下载URL
        storageRef.downloadURL { [weak self] url, error in
            guard let downloadURL = url, error == nil else {
                // 加载失败时可以保持占位图，或添加错误处理逻辑
                return
            }
            
            // 使用SDWebImage加载图片
            SDWebImageManager.shared.loadImage(with: downloadURL, options: [], progress: nil) { image, _, _, _, _, _ in
                DispatchQueue.main.async {
                    self?.image = image ?? placeholder
                }
            }
        }
    }
}

struct StorageImage: View {
    @StateObject private var loader: ImageLoader
    
    init(storagePath: String, placeholderName: String) {
        _loader = StateObject(wrappedValue: ImageLoader(storagePath: storagePath, placeholderName: placeholderName))
    }
    
    var body: some View {
        Group {
            if let image = loader.image {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            } else {
                // 加载中的占位视图，比如进度条
                ProgressView()
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        StorageImage(storagePath: "images/stars.jpg", placeholderName: "placeholder.jpg")
            .frame(width: 200, height: 200)
    }
}

这种方式适合需要自定义加载逻辑（比如添加错误处理、加载进度监听）的场景，通过@StateObject管理ImageLoader的生命周期，确保数据变化时视图自动刷新。

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