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.