Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Nov 5, 2022
Contribute to Docs

An Image view is used to incorporate images and enhance the aesthetic of the user interface (UI) and can be functional when used correctly.


// Fitting and aspect ratios

A text label can be added to the image and the image can be changed to fit the requirements.


The following example adds the Codecademy logo clipped to a circle shape:

Once the image to be used has been added to the project’s ‘Assets’ (Assets.xcassets) library, it can be loaded.

var body: some View {
.aspectRatio(contentMode: .fill)
.frame(width: 250.0, height: 250.0, alignment: .center)

The .resizable() modifier fills the entire content of the parent container. The .aspectRatio() maintains the original aspect ratio. The size can then be restricted to a custom .frame(). In this case, the .clipShape() modifier is a Circle().

This will display the following image:


All contributors

Looking to contribute?

Learn SwiftUI on Codecademy