如何在列表中显示图片 - SwiftUI

Question

我想在列表中展示从json检索到的url链接对应的图像，该如何实现？

我尝试了直接调用图片并输入url链接，但只显示了占位符，而非实际图像。

    var body: some View {
        NavigationView {
            List {
                TextField("Search for Meme by name", text: self.$searchItem)


            ForEach(viewModel.memes) { meme in
                HStack {
                    VStack(alignment: .leading, spacing: 2) {
                        Text(meme.name).font(.headline).lineLimit(nil)
                        Image(meme.url).resizable().frame(width: 100, height: 100)

                        }
                    }
                }
            }
        .navigationBarTitle("All Memes")
        }.onAppear {
            self.viewModel.fetchAllMemes()

        }
    }

- zzrb

---

你需要先下载图片，这部分不属于SwiftUI，和以前一样。 - Joakim Danielson

Answer 1

制作自己的视图，具有自己的ObservableObject，用于下载（并可选地缓存）图像。以下是一个示例：

import SwiftUI
import Combine
import UIKit

class ImageCache {
  enum Error: Swift.Error {
    case dataConversionFailed
    case sessionError(Swift.Error)
  }
  static let shared = ImageCache()
  private let cache = NSCache<NSURL, UIImage>()
  private init() { }
  static func image(for url: URL) -> AnyPublisher<UIImage?, ImageCache.Error> {
    guard let image = shared.cache.object(forKey: url as NSURL) else {
      return URLSession
        .shared
        .dataTaskPublisher(for: url)
        .tryMap { (tuple) -> UIImage in
          let (data, _) = tuple
          guard let image = UIImage(data: data) else {
            throw Error.dataConversionFailed
          }
          shared.cache.setObject(image, forKey: url as NSURL)
          return image
        }
        .mapError({ error in Error.sessionError(error) })
        .eraseToAnyPublisher()
    }
    return Just(image)
      .mapError({ _ in fatalError() })
      .eraseToAnyPublisher()
  }
}

class ImageModel: ObservableObject {
  @Published var image: UIImage? = nil
  var cacheSubscription: AnyCancellable?
  init(url: URL) {
    cacheSubscription = ImageCache
      .image(for: url)
      .replaceError(with: nil)
      .receive(on: RunLoop.main, options: .none)
      .assign(to: \.image, on: self)
  }
}

struct RemoteImage : View {
  @ObservedObject var imageModel: ImageModel
  init(url: URL) {
    imageModel = ImageModel(url: url)
  }
  var body: some View {
    imageModel
      .image
      .map { Image(uiImage:$0).resizable() }
      ?? Image(systemName: "questionmark").resizable()
  }
}

- Josh Homann