SwiftUI: images
You can display an image in a SwiftUI view by using the Image
view.
First you need to add the image to a new image set in your Assets.xcassets
file in the Xcode project navigator.
Then you can add the image to your ContentView
like this:
import SwiftUI
struct ContentView: View {
var body: some View {
Image("Avatar")
}
}
You can also use Image
to show a system image, using the format Image(systemName:)
:
struct ContentView: View {
var body: some View {
Image(systemName: "house")
}
}
The Image
view has a set of modifiers you can use, including:
.resizable()
to resize the image and adjust to the.frame()
dimensions.frame()
to set its width/height.clipShape()
to set a clipping shape.border()
to set the color of the border.overlay()
to layer another view in front of it.aspectRatio()
to set the aspect ratio.clipped()
to cut off the image outside of the frame
Example:
→ Here's my latest YouTube video
→ Get my Swift Handbook
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025