在图像上调用 .resizable() 会使图像在从 Firestore 中提取数据时消失

Question

为了给您一些背景信息，我正在创建一个使用 WaterfallGrid 库的图库视图。当我使用模拟数据时，画廊看起来不错。

struct Gallery: View {
    
    @ObservedObject var galleryViewModel = GalleryViewModel()
    
    @State var pictureData = [
        PictureModel(id: "id1", title: "Traditional Clothing", image_uri: "traditional", photographer: "John Doe", body: ""),
        PictureModel(id: "id2", title: "River", image_uri: "mountain_1", photographer: "John Doe", body: ""),
        PictureModel(id: "id3", title: "Boat", image_uri: "mountain_2", photographer: "John Doe", body: "")
    ]
    
    var body: some View {
        ZStack {
            
            Color("primary")
            
            VStack {
                HStack {
                    Text("Gallery")
                        .font(.system(size: 40, weight: .regular))
                        .foregroundColor(.white)
                    
                    Spacer(minLength: 0)
                    
                }
                .padding(.horizontal)
                
                WaterfallGrid($pictureData) { $image in

                    NavigationLink(destination: PictureInfo(selectedImage: $image), label: {

                        Image(image.image_uri)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .cornerRadius(5)
                    })

                }
                .gridStyle(
                    columns: 2
                )
            }
        }
    }
    
    init() {
        galleryViewModel.getGallery()
    }
}

但是当我 $galleryViewModel.list 而不是使用模拟数据时，图库是空的。当我删除 Image 上的 .resizable() 调用时，图片显示正常。

import Foundation
import Firebase
import SwiftUI

class GalleryViewModel: ObservableObject {
    
    @Published var list = [PictureModel]()
    private let db = Firestore.firestore()
    
    func getGallery() {
        db.collection("gallery").addSnapshotListener { (querySnapshot, error) in
            guard let documents = querySnapshot?.documents else {
                print("no gallery")
                return
            }
            
            self.list = documents.map { (queryDocumentSnapshot) in
                let data = queryDocumentSnapshot.data()
                
                let id = queryDocumentSnapshot.documentID
                let title = data["title"] as? String ?? ""
                let body = data["body"] as? String ?? ""
                let image_uri = data["image_uri"] as? String ?? ""
                let photographer = data["photographer"] as? String ?? ""
                
                return PictureModel(id: id, title: title, image_uri: image_uri, photographer: photographer, body: body)
            }
        }
    }
    
}

知道为什么要这样做吗？

Answer 1

这似乎是 WaterfallGrid 库的问题，而不是我这里的代码。如果少于 3 个元素，则不显示任何内容。在 Github 页面上创建了一个问题。

在 WaterfallGrid 中添加 .fixedSize(horizontal: false, vertical: true) 为我修复了它。

在图像上调用 .resizable() 会使图像在从 Firestore 中提取数据时消失

Calling .resizable() on an Image makes the image disappear when pulling data from Firestore

xcode

swift

google-cloud-firestore

swiftui