Question

我正在按照本教程https://www.youtube.com/watch?v=Xetrbmnszjc构建一个应用程序。我决定在其中包含API调用以从flickr中获取图像。我有一个问题，当我使用图像导航到详细信息视图时，看不到图像。如果我删除了NavigationLink，它就可以正常工作。

即使在未显示图像的情况下，NavigationLink的功能也可以正常工作。

这是调用视图的代码。

VStack(alignment: .leading) {
                Text(self.category.uppercased())
                    .font(.system(size: 40, weight: .heavy, design: .default))
                            .foregroundColor(.primary)
                        ScrollView(.horizontal, showsIndicators: false){
                            HStack(alignment: .top) {
                                ForEach(self.items, id: \.id){
                                    item in
                                    
                                    NavigationLink(destination: imageDetail(item:item)){
                                        imageItem(item:item)
                                            .frame(width:300)
                                            .padding(.trailing,30)
                                        }
                                }
                            }.onAppear{
                                Api().getPosts(url:"https://api.flickr.com/services/feeds/photos_public.gne?tags=\(self.category)&format=json&nojsoncallback=1",completion: {
                                    (posts) in self.items = posts
                                })
                            }
                        }
            }.padding(.leading, 20)

这是imageItem

的相关代码

 var body: some View {
        ScrollView{
            AsyncImage(url: URL(string: item.media.m.replacingOccurrences(of: "\\", with: ""))!, placeholder: Text("Loading..")
            )
            .aspectRatio(contentMode: .fill)
            .frame(width:300,height: 300)
            .cornerRadius(10)
            .shadow(radius: 10)
            
            VStack(alignment: .leading, spacing: 5){
                Text(item.title)
                    .font(.system(size: 25, weight: .bold, design: .default))
                    .foregroundColor(.primary)
                Text(item.description)
                    .font(.system(size: 20, design: .default))
                    .foregroundColor(.primary) .multilineTextAlignment(.leading)
                .lineLimit(2)
                    .frame(height: 40)
            }
        }
        
    }

AsyncImage是从https://www.vadimbulavin.com/asynchronous-swiftui-image-loading-from-url-with-combine-and-swift/

复制的类

Answer 1

默认情况下，NavigationLink以模板模式渲染图像，因此您只需要显式提供正确的模式，例如

AsyncImage(url: URL(string: item.media.m.replacingOccurrences(of: "\\", with: ""))!, placeholder: Text("Loading..")
)
.renderingMode(.original)

NavigationLink SwiftUI导致加载图像时出现问题

1 个答案: