Using variable for Image in SwiftUI makes images invisible in view-CodePudding

I have a data set where one parameter is a String, referring to an image which is passed into an Image constructor, looking something like this.

       var GameData = [GameDataModel(image: "game.jpg", title: "Legend of Zelda")

My object class looks like this.

struct GameView: View {
    @State var gameData: [GameDataModel]
    
    var body: some View {
        ForEach(gameData) { game in
            ZStack {
                Image(game.image) // <------------------ passing in parameter
                    .resizable()
                    .frame(width: 180, height: 250)
                    .cornerRadius(5)
            }
            
        }
        
    }
    
}

Which is called in the main view as so:

ScrollView {
                        LazyVGrid(columns: columns, spacing: 15) {
                            GameView(gameData: GameData)
                        }
                    }

My goal is to get these images to show up in a grid, which it does, but the images are invisible.

From what I saw online, I need to make the image variable @Published or something like that, but I'm not sure how I would be able to do that when I'm getting it from this data set. I tried just making the original GameData variable @Published but that gave me errors so I'm not quite sure what to do.

CodePudding user response：

If your images are in your Assets.xcassets directory, then remove the .jpg extention when referring to them.

Note, use the standard convention of lower case for variables, and uppercase for types.

Although your code would work, you could consider some re-structure of your code, to present a grid of images, like this:

struct GameDataModel: Identifiable {
    let id = UUID()
    var image: String
    var title: String
}

struct ContentView: View {
    // no extention to file names
    let gameData = [
        GameDataModel(image: "game", title: "Legend of Zelda"),
        GameDataModel(image: "game", title: "Legend of Zelda"),
        GameDataModel(image: "game", title: "Legend of Zelda"),
        GameDataModel(image: "game", title: "Legend of Zelda"),
        GameDataModel(image: "game", title: "Legend of Zelda"),
        GameDataModel(image: "game", title: "Legend of Zelda"),
        GameDataModel(image: "game", title: "Legend of Zelda")
    ]
    
    let columns = [
        GridItem(.flexible(), spacing: 1), GridItem(.flexible(), spacing: 1), GridItem(.flexible(), spacing: 1)
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 15) {
                ForEach(gameData) { game in
                    GameView(game: game)  // <-- here
                }
            }
        }
    }
}

struct GameView: View {
    @State var game: GameDataModel  // <-- here
    
    var body: some View {
        Image(game.image)  // <-- here
            .resizable()
            .frame(width: 180, height: 250)
            .cornerRadius(5)
    }
}