Swiftui image example: how to load images in a swiftui view and resize it

To display an image in a swiftui view, you can used the Image component directly. This particular view is able to load images from your bundle, as an UIImage format or from the system icons SF Symbols set. You will also see how you can let swiftui resize your image for you to use less memory.

To load an image from your bundle, you just have to use the Image Swiftui view component, and pass the image name as a string.

Image("image name")

To load an image from the UIImage, you can still use the same Image component in this way:

Image(uiImage: UIImage(named: "image name")!)

To use the apple's system icons SF Symbols set, you can again use the swiftui image view component:

Image(systemName: "heart.fill")

To see all the available apple's system icons SF Symbols set, you just have to download the sf symbol application developed by apple from this link. Once you installed it, you can browse all the available icons and copy the reference name to use in your swift ui image view.

How to resize an image in SwiftUI

In order to let an image be resizable, you have to use the resizable and aspectRatio. In this way your image will be cropped and resized according to the properties.

Image("image name")
    .resizable()
    .aspectRatio(contentMode: .fit)

You can also use the frame modifier to set the desidered image dimension.

Image("image name")
    .resizable()
    .scaledToFill()
    .frame(width: 150, height: 150)
    .clipped()

In the above example scaledToFill can be used as an alternative to aspectRatio.

How to download and display an image from url in SwiftUI

From ios 15 you can use the AsyncImage view component. It accepts the url of the image.

AsyncImage(url: URL(string: "image url"))

How to display a full background image with swiftiu without geometry reader

ZStack{
 Image(...)
 .resizable()
 .scaledToFill()
 .frame(minWidth: 0, maxWidth: .infinity)
 .frame(minHeight: 0, maxHeight: .infinity)
 .clipped()
 .edgesIgnoringSafeArea(.all)
}

Other articles