I've setup a NavigationLink so users can tap on the image and they're taken to another view, in this case "FenderExperience". I can't for the life of me figure out how to make this oval bar behind the image disappear. Is this an Xcode preview issue? I'm running Xcode 15.2
struct BrandImage: View {
var body: some View {
VStack(alignment: .leading) {
NavigationStack {
Text("Ralph Lauren")
.font(.title)
.padding(.bottom, -5)
Image("RL")
.resizable()
.scaledToFit()
.frame(width: 300, height: 200)
.overlay(
RoundedRectangle(cornerRadius: 0)
.stroke(Color.white, lineWidth: 2))
Text("Fender")
.font(.title)
.padding(.bottom, -5)
NavigationLink(destination: FenderXperience()) {
Image("Fender II")
.resizable()
.scaledToFit()
.frame(width: 300, height: 95)
.overlay(
RoundedRectangle(cornerRadius: 0)
.stroke(Color.white, lineWidth: 2))
}
Text("Burton")
.font(.title)
.padding(.bottom, -5)
Image("Burton")
.resizable()
.scaledToFit()
.frame(width: 300, height: 200)
.overlay(
RoundedRectangle(cornerRadius: 0)
.stroke(Color.white, lineWidth: 2))
Text("Ray Ban")
.font(.title)
.padding(.bottom, -5)
Image("Ray Ban")
.resizable()
.scaledToFit()
.frame(width: 300, height: 200)
.overlay(
RoundedRectangle(cornerRadius: 0)
.stroke(Color.white, lineWidth: 2))
Text("Levi's")
.font(.title)
.padding(.bottom, -5)
Image("Levis II")
.resizable()
.scaledToFit()
.frame(width: 300, height: 200)
.overlay(
RoundedRectangle(cornerRadius: 0)
.stroke(Color.white, lineWidth: 2))
}
}
.padding(.leading, 50)
}
}
#Preview {
BrandImage()
}