Why are Image objects not showing up from a SwiftUI tutorial? - ios

Question

I've been trying to change the layout to the WatchLandmarks tutorial that Apple provides for making SwiftUI apps for the watch (https://developer.apple.com/tutorials/swiftui/creating-a-watchos-app) and I can't figure out why the images aren't loading for me. It works just fine in the completed tutorial code, and the only differences are in my changes to the layout of LandmarkList and LandmarkRow.
changes to LandmarkList:
struct LandmarkList<DetailView: View>: View {
#EnvironmentObject private var userData: UserData
let detailViewProducer: (Landmark) -> DetailView
var body: some View {
VStack(alignment: .leading){
Text(" Landmarks")
.font(.system(size: 16))
ScrollView(.horizontal, showsIndicators:false){
HStack(alignment: .center){
ForEach(userData.landmarks) { landmark in
// if !self.userData.showFavoritesOnly || landmark.isFavorite {
NavigationLink(
destination: self.detailViewProducer(landmark).environmentObject(self.userData)) {
LandmarkRow(landmark: landmark)
.frame( maxWidth: 70, maxHeight: 70, alignment: .leading)
}
// }
}
}
}.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 100, alignment: .center)//.frame(width:150, height: 100)
Text(self.userData.landmarks[0].name)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 24, alignment: .center)
HStack(spacing: 32){
Button(action: { print("first button") }) {
Text("P")
}.frame(minWidth: 20, maxWidth:50, minHeight: 20, maxHeight:50)
.background(Color.orange)
.clipShape(Circle())
.overlay(Circle().stroke(Color.clear, lineWidth: 4))
.shadow(radius: 10)
Button(action: { print("second button") }) {
Text("S")
}.frame(minWidth: 20, maxWidth:50, minHeight: 20, maxHeight:50)
.background(Color.orange)
.clipShape(Circle())
.overlay(Circle().stroke(Color.clear, lineWidth: 4))
.shadow(radius: 10)
}.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 100, alignment: .center)
// List {
// Toggle(isOn: $userData.showFavoritesOnly) {
// Text("Show Favorites Only")
// }
//
// ForEach(userData.landmarks) { landmark in
// if !self.userData.showFavoritesOnly || landmark.isFavorite {
// NavigationLink(
// destination: self.detailViewProducer(landmark).environmentObject(self.userData)) {
// LandmarkRow(landmark: landmark)
// }
// }
// }
// }
// .navigationBarTitle(Text("Landmarks"))
}.frame(maxWidth: .infinity, minHeight:200, maxHeight: .infinity, alignment: .leading)
}
}
changes to LandmarkRow
struct LandmarkRow: View {
var landmark: Landmark
var body: some View {
HStack {
landmark.image
.resizable()
.frame(width: 50, height: 50)
.cornerRadius(8.0)
// Text(landmark.name)
// Spacer()
//
// if landmark.isFavorite {
// Image(systemName: "star.fill")
// .imageScale(.medium)
// .foregroundColor(.yellow)
// }
}
}
}
What am I doing wrong?

Answer 1

Try to call .renderingMode(.original) on the image.
There are two types of rendering modes for your image assets:
Original
Template
Original mode will portray the image asset as it is, while the template mode will turn all the non-transparent parts of the image into one color that you can set. The default color is black.
Note: No overview available is available in Apple documentation.
In this tutorial, you’ll learn what rendering mode in SwiftUI is and how to use it.