การโหลดรูปภาพจากทรัพยากร

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

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

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

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

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

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

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

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

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

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

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

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