I'm trying to set a NavigationButton to display an Image, instead of only being a blue-colored button.
Currently, I'm displaying a Horizontal, Scrollview, that consists of Images.
Those Images should lead to another view, which would be rendered above the rootView.
However, when I wrapped those images around a NavigationButton, those images turn out to be only blue, instead of displaying the original image intended.
CategoryRow Component (ScrollView)
ScrollView(showsHorizontalIndicator: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(categorizeCountry()) { place in
NavigationButton(destination: PlaceDetail(place: place)) {
Image(place.imageName)
.resizable()
.clipShape(Rectangle())
.frame(width: 225, height: 150)
.cornerRadius(8)
.padding(.leading, 2)
.padding(.trailing, 2)
}
}
}
}
ContentView (where the CategoryRow is rendered)
var body: some View {
NavigationView {
List {
FeaturedCard(places: fiveRandomPlaces)
CategoryRow(label: "Australia")
CategoryRow(label: "Japan")
CategoryRow(label: "Singapore")
CategoryRow(label: "Indonesia")
ForEach(store.places) { place in
PlaceCell(place: place)
}
}
.navigationBarTitle(Text("Been There"))
.navigationBarItems(trailing: Button(action: sortPlaces) {
Text("Sort")
})
.listStyle(.grouped)
}
}
I expect the Images to work as a button (which it did), but still displaying the original image, instead of being all blue.
Images to the expected result and the actual result are the following:

