تحميل الصور من الأصول
أضف أصول الصور واعرضها باستخدام Image
تحميل الصور من الأصول درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في 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/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحميل الصور من الأصول»؟
أضف أصول الصور واعرضها باستخدام Image تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟
لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تحميل الصور من الأصول»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟
نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الخط والسُمك واللون
- النص متعدد الأسطر والمحاذاة
- تحميل الصور من الأصول
- استخدام SF Symbols