SwiftUI NavigationView not see Image

问题

I have a code and make NavigationLink Button, I write Text and Image, But my Image not a see. Pls help me.

VStack{
        Image("Coachs")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 370, height: 200)
            //.clipped()
            .cornerRadius(20.0)
        NavigationLink(destination: Text("Detail view here")){
            ZStack{
                Text("Press on me")
                    .foregroundColor(.white)
                    .font(.largeTitle)
                Image("Coachs")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 370, height: 200)
                    //.clipped()
                    .cornerRadius(20.0)

            }


        }}

I make screen if you can't understand

回答1:

This looks like SwiftUI bug of handling raster images. Please find below approach for workaround. Tested with Xcode 11.4 / iOS 13.4

This is an example of cell to be used for your goal. Of course in real case the image name and navigation link destination, etc., can be injected via constructor parameters for reuse purpose.

struct TestImageCell: View {
    @State private var isActive = false

    var body: some View {
        Image("large_image")    // raster !! image
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 370, height: 200)
            .cornerRadius(20.0)
            .overlay(
                Text("Press on me")              // text is over
                    .foregroundColor(.white)
                    .font(.largeTitle)
            )
            .onTapGesture { self.isActive.toggle() } // activate link on image tap
            .background(NavigationLink(destination:  // link in background
                Text("Detail view here"), isActive: $isActive) { EmptyView() })
    }
}

回答2:

ok, I looked at other image types, try this, it should work:

    Image("IMG_4944")
        .renderingMode(.original)  // <----- this
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: 370, height: 200)
        .clipped()
        .cornerRadius(20.0)

回答3:

I made this test from your code, and all works well, ios 13.4 and catalyst, xcode 11.4 and macos catalina 10.15.4

var body: some View {
    NavigationView {
        VStack {
            Image(systemName: "person.2.fill")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 370, height: 200)
                //.clipped()
                .cornerRadius(20.0)

            NavigationLink(destination: Text("Detail view here")){
                ZStack{
                    Image(systemName: "person.2.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 370, height: 200)
                        //.clipped()
                        .cornerRadius(20.0)
                    Text("Press on me")
                        .foregroundColor(.black)
                        .font(.largeTitle)
                }
            }
        }
    }.navigationViewStyle(StackNavigationViewStyle())
}

来源：https://stackoverflow.com/questions/61168015/swiftui-navigationview-not-see-image

标签

swift

swiftui

navigationlink