Image

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

Syntax

`Image`("image-example")
// Fitting and aspect ratios

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

Example

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 {
  Image("image-example")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 250.0, height: 250.0, alignment: .center)
    .clipShape(Circle())
}

Copy to clipboard
Copy to clipboard

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: