Display Images

Published by @SoNiceInfo at 6/24/2020

Use Image() to display images.
Images are needed to be included to Assets.xcassets in advance.

Put images into Assets.xcassets

Put images into Assets.xassets in the project.
Drag and drop images into white space on the center of above image in Assets.xassets.
There are 1x, 2x, 3x options for device's magnification.
You can use only put to 1x.
In this article an image of moon is saved as named "moon".

Display Images

To display images, use Image().
Apply resizable() and frame() to change image size.
Apply scaledToFit() to resize while keeping the aspect ratio.
Also Image compliant View protocol, you can use it's modifier.

3 kinds of images are displayed on this article. 1: No modifiers are applied. Images are automatically resized when it's bigger than screen size.
2: Images are scaled it down so that the length of either side is 100, keeping the aspect ratio.
3: Add white circle and shadow to #2 image.

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("moon")
            Image("moon")
                .resizable()
                .scaledToFit()
                .frame(width: 100.0, height: 100.0, alignment: .leading)
            Image("moon")
                .resizable()
                .scaledToFit()
                .clipShape(Circle())
                .overlay(
                    Circle().stroke(Color.white, lineWidth: 4))
                .shadow(radius: 10)
                .frame(width: 200.0, height: 200.0, alignment: .leading)

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Note

You can also use Image to display the icons that on Apple devices.
Please see Display SF Symbols for more detail.

References