swift - Swift View 中的图像为空

Question

在我看来，我渲染了一个带有头像的人的列表。这是我在 Github 中的代码。

列出名称没问题，问题是，当我输出他们的头像时，视图的那部分是“空的”。它有一个宽度、高度，甚至是一个半径边界，但是是空的。图片 URL 是 Wikipedia URL。

我应该检查什么？谢谢你。

struct AvatarView: View {

    /// image
    let image: String

    var body: some View {

    Image(image)        // creates an imageview with specified image
        .resizable()    // makes image resizable
        .frame(width: 70, height: 70)
        .border(Color.gray.opacity(0.5), width: 0.5)
        .cornerRadius(35)
    }
}

这就是我调用 Avatar 视图的方式：

VStack() {

    HStack(spacing: 10) {

    // avatar
    AvatarView(image: scientist.image)

    VStack(alignment: .leading, spacing: 3) {
        Text(scientist.name).font(.headline)

标签： swiftswiftui

Answer 1

您必须从网络加载图像，我将图像类型替换为 aUIImage而不是 a String，下载图像并将图像初始化为uiImage: image.

import SwiftUI

// Instructor struct to create our test model:
struct Scientist: Identifiable {

    /// unique id
    var id: String = UUID().uuidString

    /// user name
    let name: String

    /// user profile avatar
    var image: UIImage

    /// Init
    init(name: String, image: String) {
        self.name = name
        print("Download Started")

        let url = URL(string: image)
        let data = try? Data(contentsOf: url!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
        self.image = UIImage(data: data!)!

    }

}

struct SciencesHistory {

    static func heros() -> [Scientist] {


        let scientist1 = Scientist(name: "Albert Einstein", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/1920px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg")
        let scientist2 = Scientist(name: "Niels Bohr", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Niels_Bohr.jpg/440px-Niels_Bohr.jpg")
        let scientist3 = Scientist(name: "Max Planck", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Max_Planck_1933.jpg/440px-Max_Planck_1933.jpg")

        return [scientist1, scientist2, scientist3]
    }


    func getData(from url: URL, completion: @escaping (Data?, URLResponse?, Error?) -> ()) {
        URLSession.shared.dataTask(with: url, completionHandler: completion).resume()
    }

}

struct AvatarView: View {

    /// image
    let image: UIImage

    /// body - default property for the view.
    var body: some View {

        Image(uiImage: image)        // creates an imageview with specified image
            .resizable()    // makes image resizable
            .frame(width: 70, height: 70)       // frame for the image (width, height)
             // creates border around the image with 0.5 thikness - this will create rounded view outside the image.
            .border(Color.gray.opacity(0.5), width: 0.5)
            .cornerRadius(35)  // This will hide the cutting portion outside the rounded view border - this is required as per the documentation.
    }
}

struct ScientistView: View{

    let scientist: Scientist

    /// body
    var body: some View {

        /// main vertical stack view - contains upper stackview and image
        VStack(spacing: 10) {

            // Upper Stackview - Contains Horizontal stack and post content
            VStack() {

                HStack(spacing: 10) {

                    // avatar
                    AvatarView(image: scientist.image)

                    VStack(alignment: .leading, spacing: 3) {
                        Text(scientist.name).font(.headline)
                        // Text(scientist.time).font(.subheadline)
                    }
                }

                // post content - specify nil for multi-line text
                Text(scientist.name)
            }
            .padding(.leading, 15)  // spacing from left edge of the view
            .padding(.trailing, 15) // spacing from right edge of the view

        }
        .padding(.top, 5)
    }

}

struct ContentView: View {

    let scienceHistory = SciencesHistory.heros()

    var body: some View {

        NavigationView {

                // List inside the navigationController
                List {

                    // loop through members of science history items:
                    ForEach(scienceHistory) { scientist in
                        ScientistView(scientist: scientist)
                    }
                }
                // Navbar title:
                .navigationBarTitle(Text("Science History"))
        }

    }
}

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

这是输出：