How to Left Align Image in SwiftUI?

SwiftUI – Left Align Image

To left align Image in its frame, set the frame alignment of this Image to leading edge.

The following code shows how to left align Image.

Image("image-file-name")
    .frame(maxWidth: .infinity, alignment: .leading)

Example

In the following example, we display an Image view, and set its alignment to leading edge, or in other words, left.

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Image("sunrise")
                .resizable()
                .frame(width: 100, height: 100)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.all)
                .border(Color.gray.opacity(0.5))
        }
        .padding(.all)
    }
}

The first .frame() modifier is for resizing the image to 100×100. The second .frame() modifier sets the width of the Image frame to the maximum available width and aligns the Image to the leading edge.

Screenshot

The border around the image depicts the frame of the Image, and the alignment of the Image to the left, or leading edge.

Summary

Summarising this SwiftUI Tutorial, we learned how to left align Image in SwiftUI.