Structure¶

Image¶

A view that displays an image.¶

Declaration¶

@frozen struct Image : Equatable

Overview¶

Use this view to display an image on screen.

Get Started¶

First, create an image in your Assets folder.

A screenshot of the XCode Assets folder in which an image of the ocean has been imported.

To follow along, save the following image as "ocean" in your project.

Ocean Image

Second, reference the image by name in your code.

struct ExampleView: View {
    var body: some View {
        Image("ocean")
    }
}

Third, remember to add the resizable(capInsets:resizingMode:) modifier to make your image resizable.

Add some modifiers to style your image!

struct ExampleView: View {
    var body: some View {
        Image("ocean")
            .resizable()
            .scaledToFit()
            .cornerRadius(10)
            .padding()
    }
}

A view displaying the resizable ocean image, scaled to fit the view, with a 10 point corner radius, and padding.

Resizing Images¶

Important: The resizable(capInsets:resizingMode:) modifier must come first on an Image before making changes to its size in subsequent modifiers. The scaledToFit() modifier will lock the aspect ratio of the image and scale it to the maximum size it can be without being too large for the screen.

The scaledToFill() modifier also scales the image, but it does not lock the aspect ratio and, subsequently, is likely to stretch or shrink the image to fit the available space.

Using system icon images¶

SF Symbols is a library of over 1500 symbols that Apple provides in nine weights from ultralight to black. To use these in custom images, simply use the init(systemName:) initializer.

struct ExampleView: View {
    var body: some View {
        Image(systemName: "photo")
            .resizable()
            .scaledToFit()
            .padding()
    }
}

A view displaying a resizable system image, called "photo" which has been scaled to fit the view and has a 10 point corner radius and padding.

The SF Symbols Mac app makes the symbol names easier to find. SF Symbols helps to maintain a consistent look with the Apple ecosystem.

Common Errors¶

If your app doesn’t have a file with the image name, you’ll get a useful console message saying:

No image named ‘Your file name’ found in asset catalog for main bundle.

If you find images not turning up in your app, you may want to search for this in the console.

Availability¶

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics¶

Type Method¶

==(lhs:rhs:) Returns a Boolean value indicating whether two values are equal.

Type Alias¶

Body The type of view representing the body of this view.

Enumeration¶

Interpolation The different amounts of interpolation that can be applied to an image.

Orientation Constants that specify the intended display orientation for an image.

ResizingMode The different ways of resizing an image to fill a view.

Scale The scale to apply to vector images relative to text.

TemplateRenderingMode Options for rendering the image normally, or with only 1 color.

Instance Method¶

antialiased(_:) Adjusts the antialiasing properties of an image.

interpolation(_:) Adjusts the interpolation property of an image.

renderingMode(_:) Modifies the image rendering mode as either regular or template.

resizable(capInsets:resizingMode:) Modifies an image to make it resizable.

Initializer¶

init(_:bundle:) Creates an image from an asset name and a Bundle.

init(_:bundle:label:) Creates an image from an asset name, a Bundle, and an accessibility Text label.

init(_:scale:orientation:label:) Creates an image from a CGImage with a custom Text label used for accessibility.

init(decorative:bundle:) Creates an image from an asset name and a Bundle, but the name won't be used for accessiblity.

init(decorative:scale:orientation:) Creates an image from a CGImage with no accessiblity label.

init(systemName:) Creates a system symbol image.

init(uiImage:) Creates an image from a UIImage.