Images - SwiftUI Blog

In this post, we’ll look at how to use images with SwiftUI and create some beautiful effects.

To start, we need to add an image to the asset catalog of the Xcode project. Click on Assets

Drag your image below the AppIcon (you can use an image like the one in this post header).

To use the image in your SwiftUI code, reference its name as specified in the asset catalog.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("sanfrancisco")
    }
}

In this way, the image may appear distorted or low quality.

To resize the image we have to add the resizable:

Image("sanfrancisco")
.resizable()

To remove the white on the top we choose to ignore the safe area in this way:

struct ContentView: View {
    var body: some View {
        Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .edgesIgnoringSafeArea(.all)
            
    }
}

Try this code and see what happen.

Aspect ratio

To default the aspect ratio is fill (fill the space but not preserve the aspect ratio), to preserve the aspect ratio:

struct ContentView: View {
    var body: some View {
        Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

It’s not very nice, we can add rounded corner and padding:

struct ContentView: View {
    var body: some View {
        Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(RoundedRectangle(cornerRadius: 40))
            .padding()
    }
}

To have:

Note, we added the corner radius adding the RoundedRectangle in the clipShape and It’s possible also to give a shape and size to the image (in this case a circle):

struct ContentView: View {
    var body: some View {
        Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(Circle())
            .frame(width: 200)
    }
}

Effects

There is also another effect, for example, rotation, with this code i show how to have a photo with a cut edges.

struct ContentView: View {
    var body: some View {
        Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(RoundedRectangle(cornerRadius: 40))
            .padding()
            .rotationEffect(.init(degrees: 30))
            .clipShape(RoundedRectangle(cornerRadius: 40))
            .padding()
    }
}

Overlay

Now let’s see how to overlay one object onto another without using ZStack. First, move the image to the top by using a VStack and a spacer; adjust its size with a frame and modify its opacity:

struct ContentView: View {
    var body: some View {
        VStack {
            Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 300)
            .opacity(0.5)
            Spacer()
        }
            
    }
}

Now we want to add a title on the top of the photo:

The code:

struct ContentView: View {
    var body: some View {
        VStack {
            Image("sanfrancisco")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 300)
            .opacity(0.5)
            .overlay(
                Text("San Francisco bay ")
                    .fontWeight(.heavy)
                    .font(.system(.headline, design: .rounded))
                    .foregroundStyle(.yellow)
                    .padding()
                    .background(Color.gray)
                    .clipShape(RoundedRectangle(cornerRadius: 20))
                    .opacity(0.8)
                    .padding(),
                    alignment: .top
                )
            Spacer()
        }
            
    }
}

Alignment is a property of the overlay (note the comma after the last padding).