How to use Image in SwiftUI

SwiftUI’s Image allows you to showcase different variations of design in your app

Photo by Christian Fregnan on Unsplash

In this tutorial, you’ll learn what SwiftUI Image is. You’ll learn:

• How to resize your image
• How to mask your image
• The luminance to alpha effect

Prerequisites

To follow this tutorial, you’ll need:

• Basic familiarity with Swift
• at least Xcode 11

Resizeable

To modify the size of the image, you have to almost always include resizeable().

Image("tesla")
.resizable()
.scaledToFill()
.frame(width: 200, height: 200)

Image Source: Car and Driver 2020 Tesla Model-S

Mask

You can use mask the image by adding a layer on top of it.

.mask(RoundedRectangle(cornerRadius: 4.0))

.mask(Circle())

Image("tesla")
    .resizable()
    .scaledToFill()
    .frame(width: UIScreen.main.bounds.width, height: 200)
    .mask(Text("Tesla")
        .fontWeight(.black)
        .font(.system(size: 120))
        .frame(maxWidth: .infinity, alignment: .center))

Luminance to Alpha Effect

A luminance to alpha effect creates a semi-transparent mask out of the view you apply it to. The dark region will become transparent, while the bright region will become opaque black. And the medium-brightness region will become a partially opaque grey color.