アセットから画像を読み込む
画像アセットを追加し、Image で表示します。
「アセットから画像を読み込む」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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. 🎉
よくある質問
「アセットから画像を読み込む」レッスンは無料ですか？
はい。「アセットから画像を読み込む」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「アセットから画像を読み込む」で何を学びますか？
画像アセットを追加し、Image で表示します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「アセットから画像を読み込む」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- フォント、太さ、色
- 複数行テキストと配置
- アセットから画像を読み込む
- SF Symbols の使用