How to add an image in SwiftUI?


In Xcode, you can quickly add an image to the project to display it on the app using the SwiftUI Image view.

To display an image, you only need to add it to the asset library of your Xcode project. Then you have to pass the image name to the Image() view.

Below is the given program that simply displays an image in the view:

Image("IMAGE_NAME_FROM_ASSET")

The IMAGE_NAME_FROM_ASSET is the name of the image from the asset library. As you can see, you have to use this asset name to display or add an image in the app view.

You may need to do some more with the image you can see below:

Resize the image

To resize an image, you have to use the resizable modifier. It will make the image fit the screen. Below is how you can do it:

Image("IMAGE_NAME_FROM_ASSET")
  .resizable()

Fit image to screen keeping the aspect ratio

Below is the code snippet to fit an image to the screen while keeping the original aspect ratio of the image:

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

Reference: Make SwiftUI image fit to screen keeping the aspect ratio

Change image size

The frame() modifier with width and height parameters can help you to change the image size as you can see below:

Image("IMAGE_ASSET_NAME")
  .resizable()
  .frame(width: 250, height: 250, alignment: .bottom)

The alignment argument defines the position of the image in the frame.

Set corner radius

You can set the radius value for the corner of an image using the cornerRadius() modifier:

Image("IMAGE_ASSET_NAME")
  .resizable()
  .cornerRadius(4)

Change the shape of the image

The clipShape() modifier can change the shape of an image in SwiftUI. Below is how we are specifying the shape circle by using Circle() as the parameter:

Image("IMAGE_ASSET_NAME")
  .resizable()
  .clipShape(Circle())