[Technical Questions]

[katieliuu]

In what area do you have a technical challenge?

Xcode, Simulator & Previews

Description

I am trying to add images into my UI, and have added them in the "Media" folder already. However, I cannot reference them for some reason. I call the Image() function, but nothing seems to show up. In addition, I'm getting a "File Types Order Violation".

Reproduction

I am calling Images in my switch statements, but they don't seem to show up. I provided some of the code I wrote - but let me know if you'd like me to remove it from this post! Thanks.

//
//  File.swift
//
//
//  Created by Katie Liu on 1/24/23.
//

import Foundation
import SwiftUI

struct KatieLiuView: View {
    init() {
        UISegmentedControl.appearance().selectedSegmentTintColor = .brown
        UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.white], for: .selected)
    }
    
    @State private var selectedSide: WhichFact = .tofu
    
    var body: some View {
        NavigationView {
            VStack {
                Picker("Food and Fall", selection: $selectedSide) {
                    ForEach(WhichFact.allCases, id: \.self) {
                        Text($0.rawValue)
                    }
                }
                .pickerStyle(SegmentedPickerStyle())
                .padding()
                
                Spacer()
                CappucinoView(selectedSide: selectedSide)
                Spacer()
            }
            .navigationTitle("Food and Fall")
        }
    }
}

enum WhichFact: String, CaseIterable {
    case tofu = "Evening Snack"
    case place = "Home"
    case cappucino = "Mornin GoTo"
    var id: String {
        rawValue
    }
}

struct CappucinoView: View {
    var selectedSide: WhichFact
    var body: some View {
        switch selectedSide {
        case .tofu:
            Image("Tofu")
        case .place:
            Image("Pittsburgh")
        case .cappucino:
            Image("Cappucino")
        }
    }
}

struct TofuImageView: View {
    var body: some View {
        Image("Tofu")
            .resizable()
            .frame(width: 250, height: 400)
            .shadow(color: .white, radius: 100)
    }
}

struct MoreInfoView: PreviewProvider {
    static var previews: some View {
            KatieLiuView()
            .preferredColorScheme(.light)
    }
}

Expected behavior

The image is supposed to be displayed under the segmented menu.

Additional context

No response

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[PSchmiedmayer]

Hi @katieliuu,

Thank you for your question!
Loading an image from the Swift Package Manager requires you to load the image from the Bundle.
We have a convenient extension in the InstructorViews target that you can reuse. You can then use the following statement to load an image, e.g., like this:

import InstructorViews

// ...

struct CappucinoView: View {
    var selectedSide: WhichFact
    var body: some View {
        switch selectedSide {
        case .tofu:
            Bundle.module.image(fromFileNamed: "Tofu", type: "jpeg"))
        case .place:
            Bundle.module.image(fromFileNamed: "Tofu", type: "jpeg"))
        case .cappucino:
            Bundle.module.image(fromFileNamed: "Tofu", type: "jpeg"))
        }
    }
}

You will need to adapt the fromFileNamed as well as the type parameter to fit the image name and file type extension of your files in the resources folder.

Let us know if this helps you and solves your problem!

[katieliuu]

Hi @PSchmiedmayer!

Yes, this partially solved the problem! However, the images are still not showing up as there is an empty profile icon in the center of the screen. Is there more I should specify? I've attached a screenshot below.

Thanks!
Katie

[PSchmiedmayer]

@katieliuu Can you share a link to your branch on GitHub so we can checkout the source code? The profile image normally shows up if the image couldn't be loaded.

[katieliuu]

@PSchmiedmayer Here it is!

CS342/CS342-2023-Application@3baf4b6

[PSchmiedmayer]

Hi @katieliuu,
I remember us resolving the issue yesterday after class. Can you provide a short summary of the solution for everyone who stumbles across this thread can follow the steps to solve this issue?

Please then also mark your comment or my comment above as the answer so we keep track of which discussions still need to follow up work and other students can easily spot the solution 🚀

[katieliuu]

The problem with this was that I was housing images in "Media" and not "Resources" - Resources is the folder I defined in my code in the main Package to hold all resources for the target "Katie Liu". Therefore, simply moving the images over to Resources solved the problem.