SwiftUI Image - Tutorial and Examples

Images are a critical part of most iOS app interfaces. In SwiftUI, the Image view displays graphics from your asset catalog, renders SF Symbols, and can be styled with modifiers for resizing, aspect ratio, clipping, padding, and more.

A SwiftUI image is usually a visual display rather than an interactive control. If you want the image to respond to taps, place it inside a control such as a Button or add an appropriate gesture.

1. Create a new SwiftUI Project

Launch Xcode and create a new SwiftUI project. Give the project a descriptive name such as ImageViewTutorial.

2. Prepare your image

Place your image inside the Assets.xcassets folder. You can drag an image file directly into the asset catalog in Xcode. SwiftUI can work with common image formats such as PNG, JPEG, and PDF assets.

3. Add an Image View

Open ContentView.swift and add an Image view inside the body. With generated asset symbols, you can reference the asset directly instead of typing a string name.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(.greenOrange) // Replace .greenOrange with your image's Swift symbol
    }
}

Using generated symbols reduces the chance of runtime issues caused by mistyped image names. If the asset is renamed, Xcode can show the problem at compile time and offer code completion to help fix it.

4. Run your app

Run the app in the simulator or on a device. You should see the image displayed on screen.

5. Customize your image view

The Image view becomes much more flexible when you combine it with modifiers.

Here is an example that resizes an image, preserves its aspect ratio, rounds the corners, and adds padding.

import SwiftUI

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

When you run the app again, the image should resize to fit its container, keep its proportions, show rounded corners, and include padding around the view.

Other modifiers

SwiftUI provides many additional modifiers for fine-tuning how images are displayed.

• scaledToFit() and aspectRatio(contentMode: .fit) resize the image while maintaining the original aspect ratio.
• scaledToFill() and aspectRatio(contentMode: .fill) make the image fill its frame, which may crop part of the image.
• frame(width:height:alignment:) sets explicit dimensions for the image view.
• clipShape(Circle()) or clipShape(RoundedRectangle(cornerRadius:)) changes the visible shape of the image.
• Image(systemName:) displays an SF Symbol instead of an image asset.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 24) {
            Image(.greenOrange)
                .resizable()
                .scaledToFit()
                .aspectRatio(contentMode: .fit)

            Image(.greenOrange)
                .resizable()
                .frame(width: 300, height: 300, alignment: .bottom)

            Image(.greenOrange)
                .resizable()
                .clipShape(RoundedRectangle(cornerRadius: 5))

            Image(.greenOrange)
                .resizable()
                .clipShape(Circle())

            Image(systemName: "cloud")
                .font(.largeTitle)
        }
    }
}

Continue experimenting with combinations of modifiers until the image looks exactly the way you want. SwiftUI image styling is built around this kind of small, composable chain of modifiers.