图像未显示在 SwiftUI 视图中答案

【问题标题】：Images not Showing in SwiftUI View图像未显示在 SwiftUI 视图中
【发布时间】：2020-03-23 00:45:56
【问题描述】：

我对 SwiftUI 相当陌生，我正在尝试关注名为“介绍 SwiftUI：构建您的第一个应用程序”的 WWDC-2019 应用程序演示。到目前为止，一切工作正常，只是图像没有按预期在视图上呈现。我的资产 xcasettes 正确加载了九个缩略图图像，每个图像都附有一个房间名称。下面是我的 contentView 代码：

import SwiftUI

struct ContentView: View {
    var rooms: [Room] = []

    var body: some View {
        List(rooms) { room in
            Image(room.thumbnailName)

            VStack (alignment: .leading){
                Text(room.name)
                Text("\(room.capacity) people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(rooms: testData)
    }
}

下面的代码是一个名为“Room”的可识别结构和名为“testData”的数据

import SwiftUI

struct Room : Identifiable {
    var id = UUID()
    var name: String
    var capacity: Int
    var hasVideo: Bool = false

    var imageName: String { return name}
    var thumbnailName: String { return name + "Thumb"}
}

let testData = [
                Room(name: "Observation Deck", capacity: 6, hasVideo: true),
                Room(name: "Executive Suite", capacity: 8, hasVideo: false),
                Room(name: "Charter Jet", capacity: 16, hasVideo: true),
                Room(name: "Dungeon", capacity: 10, hasVideo: true), 
                Room(name: "Panorama", capacity: 12, hasVideo: false),
                Room(name: "Oceanfront", capacity: 8, hasVideo:false),
                Room(name: "Rainbow Room", capacity: 10, hasVideo: true),
                Room(name: "Pastoral", capacity: 7, hasVideo: false),
                Room(name: "Elephant Room", capacity: 1, hasVideo: false)
]

我尝试将缩略图的名称更改为“thumbnailName”、“Thumb”、“room”，但均未成功。我无法将“拇指”一词与代码中的任何内容相关联，我怀疑这可能是问题的根源。

根据要求，以下是资产内容的屏幕截图：

Contents of my assets

【问题讨论】：

请通过快照向我们展示您的资产内容
这里是资产内容的截图：

标签： swiftui

【解决方案1】：

换行：

var thumbnailName: String { return name + "Thumb"}

到这里：

var thumbnailName: String { return name}

图像不会自动改变大小，只需在某处添加“拇指”即可。您可以在资产中添加带有“thumb”名称的小图像，或者您只需通过添加可调整大小和框架来更改图像的大小。

【讨论】：

【解决方案2】：

图像不会自动改变它们的大小，只需在文件 ROOM 中添加“thumb”，其中有你的结构代码，然后在 go 之后退出单词“thumb”并将下一行代码放在 Image (room.thumbnailName )

ROM 文件：

var thumbnailName: String {return name}

内容视图：

 Image (room.thumbnailName)
                .resizable()
                .frame(width: 32.0, height: 32.0)

【讨论】：