所以我试图使用从我的Node JS服务器获取的数据创建一个内容提要.

Here I fetch data from my API

class Webservice {
    func getAllPosts(completion: @escaping ([Post]) -> ()) {
        guard let url = URL(string: "http://localhost:8000/albums")
     else {
     fatalError("URL is not correct!")
    }

        URLSession.shared.dataTask(with: url) { data, _, _ in

            let posts = try!

                JSONDecoder().decode([Post].self, from: data!); DispatchQueue.main.async {
                    completion(posts)
            }
        }.resume()
    }
}

Set the variables to the data fetched from the API

final class PostListViewModel: ObservableObject {

    init() {
        fetchPosts()
    }

    @Published var posts = [Post]()

    private func fetchPosts() {
        Webservice().getAllPosts {
            self.posts = $0
        }
    }


}
struct Post: Codable, Hashable, Identifiable {

    let id: String
    let title: String
    let path: String
    let description: String
}

SwiftUI

struct ContentView: View {

    @ObservedObject var model = PostListViewModel()

        var body: some View {
            List(model.posts) { post in
                HStack {
                Text(post.title)
                Image("http://localhost:8000/" + post.path)
                Text(post.description)

                }

            }
        }

}

post.titlepost.description中的文本显示正确,但Image()中没有显示任何内容.如何使用服务器上的URL显示图像?

推荐答案

iOS 15更新:

you can use asyncImage in this way:
AsyncImage(url: URL(string: "https://your_image_url_address"))

有关Apple开发者文档的更多信息:

使用ObserveObject(iOS 15之前)

首先,您需要从url获取图像:

class ImageLoader: ObservableObject {
    var didChange = PassthroughSubject<Data, Never>()
    var data = Data() {
        didSet {
            didChange.send(data)
        }
    }

    init(urlString:String) {
        guard let url = URL(string: urlString) else { return }
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data else { return }
            DispatchQueue.main.async {
                self.data = data
            }
        }
        task.resume()
    }
}

您也可以将其作为Webservice类函数的一部分.

然后在ContentView struct 中,可以通过以下方式设置@State image:

struct ImageView: View {
    @ObservedObject var imageLoader:ImageLoader
    @State var image:UIImage = UIImage()

    init(withURL url:String) {
        imageLoader = ImageLoader(urlString:url)
    }

    var body: some View {
        
            Image(uiImage: image)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width:100, height:100)
                .onReceive(imageLoader.didChange) { data in
                self.image = UIImage(data: data) ?? UIImage()
        }
    }
}

此外,如果您需要更多信息,这tutorial是一个很好的参考

Swift相关问答推荐

防止NavigationLink自行返回导航视图

向文本元素添加背景色失败

我在SwiftUI中的动画无法正常工作

如何在SwiftUI中做出适当的曲线?

将matchedGeometryEffect 应用于列表视图内的视图时,列表视图中的项目会受到影响 - SwiftUI

如何使 onKeyPress 与 TextField 快速配合使用?

Xcode创建GitHub仓库,但未推送所有文件

SwiftUI:列表背景为空列表时为黑色

URL appendPathComponent(_:) 已弃用?

覆盖一个子元素的 HStack 对齐方式

deinitialize() 与 deallocate()

在 macOS (Swift) 上获取 BSD 驱动器名称的最佳方法是什么?

状态变量更改后,SwiftUI 视图不会更改

Swift Swiftui - 将 colored颜色 保存到 UserDefaults 并从 @AppStorage 使用它

Vapor 4,如何按外键过滤?

用于 Swift 编码的 iOS 应用程序的 Ffmpeg

阻止其他类型的键盘

VStack SwiftUI 中的动态内容高度

Swift 2.0 方法不能标记为@objc,因为参数的类型不能在 Objective-C 中表示

iPhone 纵向和 iPad 横向的通用应用程序