SwiftUI Images disappearing when in NavigationLink - scrollview

Question

I am trying out SwiftUI and I am building a holiday app in which you can see where have you been what was the weather like there and how long did you stay there.
The problem is that when I put my HolidayCard in NavigationLink all images disappear.
This is the code and the preview with navigation link
struct ContentView: View {
var body: some View {
NavigationView {
ScrollView {
ForEach(holidayData, id: \.id) { holiday in
NavigationLink(destination: HolidayDetails(holiday: holiday)) {
HolidayCard(holiday: holiday)
}
}
}
.navigationBarTitle(Text("My holidays"), displayMode: .large)
}
}
}
This is my HolidayCard and how should it look like
var body: some View {
HStack {
VStack(alignment: .leading, spacing: 12) {
Spacer()
holiday.weatherImage
.resizable()
.frame(width: 48, height: 48)
VStack(alignment: .leading, spacing: 0) {
Text("\(holiday.city),")
.font(.headline)
.fontWeight(.bold)
Text(holiday.country)
.font(.subheadline)
}
Text("\(holiday.season.rawValue) · \(holiday.duration) days")
.font(.headline)
.fontWeight(.light)
}
.foregroundColor(Color.white)
.padding()
.background(Color.black.opacity(0.5))
Spacer()
}
.frame(width: UIScreen.main.bounds.width - 20, height: 200)
.background(
holiday.cityImage
.resizable()
.aspectRatio(contentMode: .fill)
)
.cornerRadius(10)
.padding(10)
.padding(.top, 30)
.shadow(color: Color.gray, radius: 6, x: 3, y: 6)
}
HolidayDetails
struct HolidayDetails: View {
var holiday: Holiday
#State var moreDescription = false
var body: some View {
ScrollView {
VStack {
ZStack(alignment: .bottomLeading) {
holiday.cityImage
.resizable()
.frame(height: moreDescription ? UIScreen.main.bounds.height * 0.3 : UIScreen.main.bounds.height * 0.6)
.aspectRatio(contentMode: .fill)
.frame(width: UIScreen.main.bounds.width)
.animation(.easeInOut)
HStack {
VStack(alignment: .leading, spacing: 12) {
holiday.weatherImage
.resizable()
.frame(width: 64, height: 64)
VStack(alignment: .leading, spacing: 0) {
Text("\(holiday.city),")
.font(.largeTitle)
.fontWeight(.bold)
Text(holiday.country)
.font(.title)
}
Text("\(holiday.season.rawValue) · \(holiday.duration) days")
.font(.headline)
.fontWeight(.light)
}
.foregroundColor(Color.white)
.animation(.easeInOut)
.padding()
}
}
VStack(alignment: .center, spacing: 12) {
Text(holiday.description)
.font(moreDescription ? .subheadline : .caption)
.lineLimit(moreDescription ? 99 : 2)
.opacity(moreDescription ? 1 : 0.5)
.animation(.easeInOut)
.padding()
Button(action: {
withAnimation(.easeInOut(duration: 3)) {
self.moreDescription.toggle()
}
}) {
Text(moreDescription ? "Less.." : "More..")
.font(.caption)
.padding(.vertical, moreDescription ? 10 : 5)
.padding(.horizontal, moreDescription ? 30 : 15)
.background(Color.blue)
.foregroundColor(Color.white)
.animation(.easeInOut)
}
.cornerRadius(10)
}
Spacer()
}
}
}
}
Holiday model
import Foundation
import SwiftUI
struct Holiday: Hashable, Codable, Identifiable {
var id: Int
var city: String
var country: String
var description: String
var duration: Int
var weather: Weather
var season: Season
}
extension Holiday {
var weatherImage: Image {
Image("\(self.weather)")
}
var cityImage: Image {
Image(self.city
.replacingOccurrences(of: " ", with: "")
.lowercased())
}
}
enum Weather: String, CaseIterable, Hashable, Codable {
case cloudy = "cloudy"
case rainy = "rainy"
case snowy = "snowy"
case sunny = "sunny"
}
enum Season: String, CaseIterable, Hashable, Codable {
case summer = "Summer"
case winter = "Winter"
case spring = "Spring"
case autumn = "Autumn"
}
And this is how I get holiday populated
import Foundation
let holidayData: [Holiday] = load("holidayData.json")
func load<T: Decodable>(_ filename: String, as type: T.Type = T.self) -> T {
let data: Data
guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
else {
fatalError("Couldn't find \(filename) in main bundle.")
}
do {
data = try Data(contentsOf: file)
} catch {
fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
}
do {
let decoder = JSONDecoder()
return try decoder.decode(T.self, from: data)
} catch {
fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
}
}
Without the Navigation link the background image and the weather image are visible.

Answer 1

Try to put .renderingMode(.original) in your Image

Answer 2

Try to add this parameter to your NaviguationLink or Button
.buttonStyle(PlainButtonStyle())