Displaying Images in SwiftUI

In SwiftUI, you can easily display images in your views using the Image view. To get started, you’ll need to add the image to a new image set in your Assets.xcassets file in Xcode.

Once you have added the image to your assets, you can use the Image view in your ContentView like this:

import SwiftUI

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

You can also use the Image view to display system images by using the Image(systemName:) initializer:

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

The Image view provides a set of modifiers that you can use to customize the appearance of the image, such as:

• .resizable() to make the image resizable and adjust to the .frame() dimensions
• .frame() to set the width and height of the image
• .clipShape() to apply a clipping shape to the image
• .border() to set the color of the border around the image
• .overlay() to add another view on top of the image
• .aspectRatio() to set the aspect ratio of the image
• .clipped() to clip the image to fit within the frame

Here’s an example that demonstrates some of these modifiers in action:

Tags: SwiftUI, Images, Xcode, View, Modifiers