Skip to main content

image

好的 👍 我來幫你整理一下 Swift / SwiftUI 中 顯示圖片 (Image) 的常見用法,包含 本地 (local)遠端 (remote) 圖片。

🖼 1. Local Image (本地圖片)

(1) 使用 Asset Catalog

先把圖片放到 Xcode 的 Assets.xcassets 裡,假設名稱叫 logo

import SwiftUI

struct ContentView: View {
var body: some View {
VStack {
// 基本顯示
Image("logo")

// 可縮放
Image("logo")
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)

// 系統內建 SF Symbols
Image(systemName: "star.fill")
.foregroundColor(.yellow)
.font(.largeTitle)
}
}
}

📌 Image("logo") 預設會從 Assets.xcassets 中讀取。

(2) 從 Bundle 讀取

如果圖片放在專案資料夾而不是 Asset:

Image(uiImage: UIImage(named: "example.png")!)

🌐 2. Remote Image (遠端圖片)

SwiftUI 原生 Image 不支援 remote URL,常見做法有兩種:

(1) 使用 AsyncImage (iOS 15+)

struct ContentView: View {
var body: some View {
AsyncImage(url: URL(string: "https://picsum.photos/200")) { phase in
switch phase {
case .empty:
ProgressView() // 載入中
case .success(let image):
image.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
case .failure:
Image(systemName: "exclamationmark.triangle") // 失敗
.foregroundColor(.red)
@unknown default:
EmptyView()
}
}
}
}

(2) 使用第三方套件 (更完整)

例如 Kingfisher

import SwiftUI
import Kingfisher

struct ContentView: View {
var body: some View {
KFImage(URL(string: "https://picsum.photos/200"))
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
}
}

Kingfisher 提供快取、placeholder、GIF 支援,比內建 AsyncImage 更強大。

🔑 總結

  • 本地圖片Image("logo") (在 Assets 裡) 或 UIImage(named:)

  • 系統圖標Image(systemName: "star")

  • 遠端圖片

    • iOS 15+ → AsyncImage
    • 需要快取 / 更多功能 → 第三方套件 (Kingfisher, SDWebImageSwiftUI)

要不要我幫你整理一個 完整對照表 (local / system / remote) 的 SwiftUI 寫法,讓你 copy 就能用?