如何通过API URL显示图像?迅速

时间:2019-09-10 20:56:59

标签: swift swiftui

我有一个应用程序,其中显示了来自API的数据。我做了一个获取数据的服务,其中URL(string =“”)是API的URL:

class Webservice {

    func getAllMatches(completion: @escaping ([Matches.Matchs]?) -> ()) {

        guard let url = URL(string: "API")
            else {
                fatalError("URL is not correct!")
        }
        URLSession.shared.dataTask(with: url) { data, _, _ in

            let matchs = try! JSONDecoder().decode([Matches.Matchs].self, from: data!)
            DispatchQueue.main.async {
                completion(matchs)
            }
        }.resume()
    }

}

然后我创建了一个其中设置了API字段的ViewModel:

class MatchListViewModel: ObservableObject {

    @Published var matches = [MatchViewModel]()


    init() {
        fetchMatch()


    }

    func fetchMatch() {

        Webservice().getAllMatches { matches in

            if let matches = matches {
                self.matches = matches.map(MatchViewModel.init)
            }
        }
    }

}


class MatchViewModel {

    let id = UUID()

    var match: Matches.Matchs

    init(match: (Matches.Matchs)) {
        self.match = match
    }


    var championship: String {
        return self.match.championship.name
    }

    var local_Name: String {
        return self.match.local.name
    }

    var local_Image: String  {
        return self.match.local.image
    }

    var local_goals: Double {
        return self.match.local_goals
    }

    var local_penalty_goals: Double {
        return self.match.local_penalty_goals
    }
    var stadium_Name: String {
        return self.match.stadium.name
    }

}

在API中,有一个显示图像的字段,该字段包含在URL中,我举一个例子:

"local":{  
     "slug":"nombre",
     "name":"nombre",
     "short_name":"nombre",
     "image":"https://s3.amazonaws.com/funx-futbol/dashboard/ad.png"
 },

我的问题是:如何通过该URL显示该图像? API查询有效,因为它为我带来了我所需的信息,但是我需要通过该链接向我展示图像,但是我没有实现。

感谢阅读!

error

3 个答案:

答案 0 :(得分:1)

使用这样的加载器加载数据:

import Combine

public class DataLoader: ObservableObject {

    public let objectWillChange = PassthroughSubject<Data,Never>()

    public private(set) var data = Data() {
        willSet {
            objectWillChange.send(newValue)
        }
    }

    private let resourseURL: URL?

    public init(resourseURL: URL?){
        self.resourseURL = resourseURL
    }

    public func loadImage() {
        guard let url = resourseURL else {
            return
        }

        URLSession.shared.dataTask(with: url) { (data,_,_) in
            guard let data = data else {
                return
            }
            DispatchQueue.main.async {
                self.data = data
            }
        }   .resume()
    }
}

和一个类似的结构来显示它:

import SwiftUI 

struct WebImage: View {

    @ObservedObject private var imageLoader: DataLoader

    public init(imageURL: URL?) {
        imageLoader = DataLoader(resourseURL: imageURL)
    }

    public var body: some View {
        if let uiImage = UIImage(data: self.imageLoader.data) {
            return AnyView(Image(uiImage: uiImage)
                            .resizable()
                            .aspectRatio(contentMode: ContentMode.fit))
        } else {
            return AnyView(Image(systemName: "ellipsis")
                            .onAppear(perform: { self.imageLoader.loadImage() }))
        }
    }
}

答案 1 :(得分:0)

您可以通过init(contentsOf:):https://developer.apple.com/documentation/foundation/data/3126626-init初始化数据,然后可以使用该数据通过init({data :):https://developer.apple.com/documentation/uikit/uiimage/1624106-init

初始化UIImage。

如果您采用这种方式,请记住该数据初始化程序默认情况下不会在后台线程上运行,因此可能会导致性能下降,可能您希望将其推送到后台,然后在完成时使用GCD来使用结果并更新用户界面。

答案 2 :(得分:0)

如果您不想编写任何自定义类,则可以使用URLImage库。它具有大量的自定义选项,您可以将其应用于远程映像。

您可以通过添加快速包(steps)将其安装在项目中。

希望对您有帮助。

快乐的编码。