如何使用 Firebase 存储下载文件中的图像并在表格视图中显示它们？

Question

下午好，

我已经被这个问题困扰了几个月。我正在尝试使用 firebase 存储来保存用户上传的图像文件。然后程序应该能够更新队列并在水平表视图中显示图像。有点像 netflix，它的电影/节目的标题，但我的只是图片。在试图弄清楚这一点之后，这就是我想出的。这里是接收图片

class ImageRecieve : ObservableObject {
    
    @Published var songImageArrayURL = [URL]()
    @Published var data : Data?
    @Published var songImage : NSImage?
    @Published var AlbumCoverArray = [NSImage]()
        func GetURLS(){
            //we want to get the download urls
                  bfRef.listAll { (result, error) in
                      if let error = error{ //if theres an error, print it
                          print(error.localizedDescription)
                      }
                      let prefixes = result.prefixes
                      //loop to search each song prefix
                      for i in prefixes.indices{
                        //get the song of each prefix
                          prefixes[i].listAll { (result, error) in
                              if let error = error {
                                  print(error.localizedDescription)
                              }
                              else {
                                  let items = result.items
                                //if anything contains ".mp3" dont add it to array.
                                for j in items.indices{
                                    if(!items[j].name.contains("mp3")){
                                        SongImage.append(items[j])
                                        self.download(SongImage: items[j])
                                    }
                                }
                                
                            }
                          }
                    }
                }
        }
        
    func download(SongImage:StorageReference){
                //get download url
        DispatchQueue.main.async {
                SongImage.downloadURL { (url, error) in
                    if let error = error { //if there is an error print it
                        print(error.localizedDescription)
                    }
                    else {
                        if(url != nil){
                            self.songImage = NSImage(byReferencing: url!)
                            self.AlbumCoverArray.append(self.songImage!)
                            }
                        }
                    }
    }
}
    
    func load(){
        if(self.songImageArrayURL.isEmpty){
            GetURLS()
        }
        print(self.songImageArrayURL)
        for i in self.songImageArrayURL.indices{
            print(self.songImageArrayURL[i])
            DispatchQueue.global().async{
                if let data =  try? Data(contentsOf: self.songImageArrayURL[i]){
                    if let image = NSImage(data:data){
                        DispatchQueue.main.async {
                            self.songImage = image
                        }
                    }
                }
            }
        }
    }
    func cancel(){
    }
}

这里是加载图片：

struct LoadImages<Placeholder: View>: View {
    
    @ObservedObject var loader : ImageRecieve
    private var placeholder : Placeholder?
    
    init(placeholder: Placeholder? = nil) {
        loader = ImageRecieve()
        self.placeholder = placeholder
    }
    
    var body: some View {
         image
            .onAppear(perform: loader.GetURLS)
             .onDisappear(perform: loader.cancel)
        
        
     }
     
     private var image: some View{
        ForEach(loader.AlbumCoverArray.indices,id:\.self){
            i in
            Group{
                if(self.loader.songImage != nil){
                    Image(nsImage:self.loader.AlbumCoverArray[i]).resizable().frame(width:50, height:50)
                }
                else{
                    self.placeholder
                }
            }
        }
    }
}

我一直坚持的问题是照片一次只下载一张，而不是一张一张地列出。例如，他们显示一个图像，然后切换到下一个。我想要一组图像。以便将图像添加到列表中。我尝试过使用图像数组，但它不起作用。

Answer 1

照片一次只下载一张，没有一一列出。

在所有语言中，数组/列表都是按顺序处理的，您可能希望使用多线程进行并行处理。使用队列并分配几个下载图像的线程，每次下载后从队列中弹出元素。

所有子线程将数据追加/推送到主线程。通过这种方式，您将能够在加载图像时显示它们。

PS：我是 != swiftie，但看到你的编程我感到不安。尝试改进代码语法，避免过多的函数和空格。