SwiftUI Image tutorial - Simple Swift Guide

Learn how to use Images in SwiftUI, resize images, adjust their content ratio, style them and more. This tutorial will get you started with SwiftUI Images.

In the following examples we are going to use a photo downloaded from Unsplash. In order to add it to your Xcode project, download it to your computer, click on Assets.xcassets in Xcode project and drag and drop the image onto the list of assets. Follow this introductory tutorial on how to add image to Xcode project in SwiftUI.

Display imported image at its full size (e.g., the size of Image view equals to the size of the image):

var body: some View {
    Image("fall-leaves")
}

You will notice that the above image extends beyond the screen size and only a portion of it is visible:

In order to fix that, apply the .resizable() modifier to make it fit the entire available screen area:

Image("fall-leaves")
        .resizable()

It looks much better in a sense that it fits within the screen edges however it’s stretched out now:

Now, let’s scale this image to fit within the screen edges and maintain its aspect ration:

Image("fall-leaves")
    .resizable()
    .scaledToFit()

Which is also equivalent to using the .aspectRatio() modifier:

Image("fall-leaves")
    .resizable()
    .aspectRatio(contentMode: .fit)

The result looks great:

Add a header title above the image and position it towards the top of the screen:

VStack {
    Text("Fall Collection")
        .font(.largeTitle)
    Image("fall-leaves")
        .resizable()
        .scaledToFit()
    Spacer()
}

SwiftUI Image with text header aligned to top of the screen

Position the image within a custom frame:

Image("fall-leaves")
    .resizable()
    .scaledToFit()
    .frame(width: 250.0, height: 250.0)

Note that I’m using the SwiftUI canvas live preview of my code and it highlighted the border of my custom frame because I kept the blinking cursor on the Image code. While still keeping the original aspect ration of the image, it now doesn’t fill the entire height of the custom frame:

Align the image to the top of the custom frame:

Image("fall-leaves")
    .resizable()
    .scaledToFit()
    .frame(width: 250.0, height: 250.0, alignment: .top)

SwiftUI Image positioned to the top of the frame

How to clip the image to a circle and display only a portion of the image covered by the circle:

Image("fall-leaves")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 250.0, height: 250.0, alignment: .center)
    .clipShape(Circle())

The result looks fantastic. A few words of explanation on what we’ve achieved here:

by applying the .resizable() modifier you’re allowing to set the aspect ration of the image
use the .aspectRatio() modifier to fill the entire content of the parent container
restrict the size of the image to a custom frame
apply the .clipShape() modifier using a Circle()

How to clip the image to a custom frame and add a border to it:

  Image("fall-leaves")
     .resizable()
     .aspectRatio(contentMode: .fill)
     .frame(width: 250.0, height: 250.0, alignment: .center)
     .border(Color.blue, width: 3.0)
     .clipped()

SwiftUI Image clipped to a custom frame with a border