SwiftUI NavigationView not see Image

user_11367220 0
Viewed 1063

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 enter image description here

navigationlink swiftui swift
3 Answers

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)
user_119698170

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())
}
user_119698170

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

demo

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() })
    }
}
user_122990300
Related