SwiftUI Academy · Урок

Загрузка изображений из ресурсов

Добавляйте ресурсы изображений и отображайте их с помощью 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 включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к SwiftUI Academy