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())
}

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: