Loading Images from Assets
Add image assets and display them with Image.
Loading Images from Assets is a free SwiftUI Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. 🎉
Frequently asked questions
Is the “Loading Images from Assets” lesson free?
Yes — the full text of “Loading Images from Assets” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Loading Images from Assets”?
Add image assets and display them with Image. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Loading Images from Assets” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Fonts, Weight & Color
- Multiline Text & Alignment
- Loading Images from Assets
- Using SF Symbols