Carga de imágenes desde los recursos
Añada recursos de imagen y muéstrelos con Image.
Carga de imágenes desde los recursos es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🎉
Preguntas frecuentes
¿La lección «Carga de imágenes desde los recursos» es gratis?
Sí — el texto completo de «Carga de imágenes desde los recursos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Carga de imágenes desde los recursos»?
Añada recursos de imagen y muéstrelos con Image. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar SwiftUI Academy?
No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Carga de imágenes desde los recursos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?
Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fuentes, peso y color
- Texto multilínea y alineación
- Carga de imágenes desde los recursos
- Uso de SF Symbols