ios - 在 SwiftUI 中切换 View 后 Firebase 图像为空

Question

我正在尝试显示存储在 Firebase 中的对象列表中的图像。最初图像加载正常，但如果我切换到不同的 View 并返回到 ListView ，图像将不会再次加载。

Gif of the described bug

图像数据似乎在两次加载尝试中均按预期保存: here

下面是我的图像加载器代码，它使用一个 url 从 Firebase 存储中获取图像，以及包含图像的列表行。

ImageLoader.swift

import Foundation
import SwiftUI
import Firebase
import FirebaseFirestore

class ImageLoader: ObservableObject {
    @Published var dataIsValid = false
    var data:Data?

    func loadImage(url: String) {
        let imageRef = Storage.storage().reference(forURL: url)
        imageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
            if let error = error {
                print("\(error)")
            }
            guard let data = data else { return }
            DispatchQueue.main.async {
                print(self.dataIsValid)
                self.dataIsValid = true
                self.data = data
            }
        } 
    }

    func imageFromData() -> UIImage {
        UIImage(data: self.data!)!
    }
}

---

ListRow.swift

import SwiftUI
import Combine

struct EventRow: View {
    @ObservedObject var imageLoader = ImageLoader()
    var imageUrl: String

    var body: some View {
        HStack {
            Image(uiImage: self.imageLoader.dataIsValid ? self.imageLoader.imageFromData() : UIImage())
            .resizable()
            .frame(width: 100.0, height: 140.0)
            .background(Color.gray)
            .clipShape(RoundedRectangle(cornerRadius: 5.0))

        }
        .onAppear {
            self.imageLoader.loadImage(url: self.imageUrl)
        }
    }
}

Answer 1

我解决此问题的方法是创建自定义 ImageView 并处理此 View 中的图像加载。我通过关注 this tutorial 解决了这个问题并意识到那是我错过的步骤。如果有人能解释为什么使用内置的 SwiftUI Image() 会导致这个问题，我将不胜感激。

ListRow.swift

import SwiftUI

struct ListRow: View {
    var imageUrl: String

    var body: some View {
        HStack {
            FBURLImage(url: imageUrl)
        }
    }
}

FBURLImage.swift

import SwiftUI

struct FBURLImage: View {
    @ObservedObject var imageLoader: ImageLoader

    init(url: String) {
        imageLoader = ImageLoader()
        imageLoader.loadImage(url: url)
    }

    var body: some View {
        Image(uiImage:
            imageLoader.data != nil ? UIImage(data: imageLoader.data!)! : UIImage())
            .resizable()
            .frame(width: 100.0, height: 140.0)
            .background(Color.gray)
            .clipShape(RoundedRectangle(cornerRadius: 5.0))
    }
}

ImageLoader.swift

import Foundation
import SwiftUI
import Firebase
import FirebaseFirestore

class ImageLoader: ObservableObject {
    @Published var data: Data?

    func loadImage(url: String) {
        let imageRef = Storage.storage().reference(forURL: url)
        imageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
            if let error = error {
                print("\(error)")
            }
            guard let data = data else { return }
            DispatchQueue.main.async {
                self.data = data
            }
        }
    }
}