SwiftUI Academy · Lektion

Bilder aus Assets laden

Fügen Sie Bild-Assets hinzu und zeigen Sie sie mit Image an.

Bilder aus Assets laden ist eine kostenlose SwiftUI Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des SwiftUI Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Images Bring Apps to Life

Text is only half the story. This lesson shows how to add image files to your project and display them on screen. 🖼️

The Asset Catalog

Images live in Assets, the asset catalog in your project. Drag a picture there and Xcode gives it a name you reference in code.

Showing an Asset Image

Use Image with the asset name to display it. The name is the one shown in the asset catalog, not the file path.

Image("logo")

Images Are Their Native Size

By default an Image shows at its full pixel size, which can overflow the screen. You will usually need to resize it.

Image("hero")

Making Images Resizable

Add the resizable modifier first so the image can stretch to fit the space you give it.

Image("hero")
    .resizable()

Keeping the Aspect Ratio

Pair resizable with scaledToFit so the image scales without distortion, leaving empty space if needed.

Image("hero")
    .resizable()
    .scaledToFit()

Filling the Space

Use scaledToFill when you want the image to cover the whole frame. Crop the overflow with a clip so edges stay clean.

Image("hero")
    .resizable()
    .scaledToFill()

Sizing with frame

Combine resizable with a frame to pin exact dimensions. This is the common recipe for avatars and thumbnails.

Image("avatar")
    .resizable()
    .frame(width: 80, height: 80)

Clipping to a Shape

Wrap things up with clipShape to round images into circles or rounded rectangles for a refined look.

Image("avatar")
    .resizable()
    .frame(width: 80, height: 80)
    .clipShape(Circle())

Decorative vs Meaningful

Mark purely decorative images so VoiceOver skips them, and label meaningful ones so they are described to everyone.

Image(decorative: "swirl")

Loading Remote Images

For images from the web, AsyncImage downloads and shows them, with a placeholder while loading. Assets stay for bundled art.

AsyncImage(url: photoURL)

Quick Check

What must you add before an Image can resize?

Lesson Recap

You loaded assets with Image, then made them fit using resizable, scaledToFit, frame, and clipShape. Now your art behaves. 🎉

Häufig gestellte Fragen

Ist die Lektion „Bilder aus Assets laden“ kostenlos?

Ja — der vollständige Text von „Bilder aus Assets laden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des SwiftUI Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der SwiftUI Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Bilder aus Assets laden“?

Fügen Sie Bild-Assets hinzu und zeigen Sie sie mit Image an. Du übst SwiftUI Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um SwiftUI Academy zu starten?

Keine Vorkenntnisse erforderlich. SwiftUI Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Bilder aus Assets laden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser SwiftUI Academy-Lektion Code schreiben und ausführen?

Ja. Jede SwiftUI Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu SwiftUI Academy