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.xcassets on Xcode](/images/xcode_image.png)
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()
}
}
![SwiftUIで画像を表示する画像](/images/image.png)
Note
You can also use Image
to display the icons that on Apple devices.
Please see Display SF Symbols for more detail.