SwiftUI 07-图像加载实战：为何我只用 `Image` 和 Kingfisher

图像是现代移动应用 UI 的核心组成部分。SwiftUI 为本地图像提供了简洁的 Image 视图，但在加载远程图片方面，虽然从 iOS 15 开始加入了 AsyncImage，但它实际使用场景非常有限，生产项目中我们通常会选择使用第三方库，如 Kingfisher 或 SDWebImageSwiftUI。

一、使用 `Image` 展示本地图像

SwiftUI 的 Image 视图用于展示打包在项目中的资源图片，适用于 App 图标、界面装饰元素等。

Image("example")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)

使用建议

图像需放入 Xcode 的 Asset Catalog；
使用 .resizable() 让图片可缩放；
配合 .aspectRatio 和 .frame 控制布局。

二、异步加载远程图片：`AsyncImage` 是不是“鸡肋”？

从 iOS 15 开始，SwiftUI 引入了 AsyncImage 来加载远程图片：

AsyncImage(url: URL(string: "https://example.com/image.jpg"))

自定义加载过程

AsyncImage(url: URL(string: "https://example.com/image.jpg")) { phase in
    switch phase {
    case .empty:
        ProgressView() // 加载中
    case .success(let image):
        image.resizable().aspectRatio(contentMode: .fit)
    case .failure:
        Image(systemName: "photo") // 加载失败
    @unknown default:
        EmptyView()
    }
}

为什么我几乎不用 `AsyncImage`

问题点	描述
没有缓存	滚动时图片频繁加载，体验极差
无重试机制	网络抖动直接失败
无渐显动画	UI 不够丝滑
无缓存控制	无法指定缓存策略、超时等参数
缺乏扩展性	无法做图片处理（圆角、滤镜等）

因此：适合 demo / 教学，但不推荐用于真实项目。

三、推荐方案：使用 Kingfisher 加载网络图片

Kingfisher 是一个成熟的 Swift 图像加载库，拥有缓存、占位图、动画、图片处理等丰富功能。完美适配 SwiftUI。

示例：加载并缓存远程图片

import Kingfisher

KFImage(URL(string: "https://example.com/image.jpg"))
    .placeholder {
        ProgressView()
    }
    .resizable()
    .aspectRatio(contentMode: .fill)
    .clipShape(RoundedRectangle(cornerRadius: 10))

特点：

自动缓存和复用图片资源；
支持圆角、模糊、滤镜等；
内建渐隐渐显、错误占位图、占位动画；
支持 iOS、macOS、tvOS、watchOS；

四、封装一个通用头像组件（推荐）

封装后使用统一组件更好管理样式与逻辑：

import Kingfisher

struct AvatarView: View {
    let url: String
    var size: CGFloat = 64

    var body: some View {
        KFImage(URL(string: url))
            .placeholder {
                ProgressView()
            }
            .resizable()
            .cancelOnDisappear(true)
            .scaledToFill()
            .frame(width: size, height: size)
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.gray.opacity(0.2), lineWidth: 1))
            .shadow(radius: 1)
    }
}

五、什么时候仍然可以用 `AsyncImage`

适合使用场景	示例
教程与学习	SwiftUI 基础课程、快速原型
简单工具 App	不关注流量、图片体验的内部项目
临时图片加载	生成 QRCode、加载本地服务器测试图等

如果你的图片只是短期、不可复用、无需缓存，那就用 AsyncImage 也无妨。

建议

想构建现代 SwiftUI App？图像加载的体验非常关键。不要怕引入三方库，Kingfisher 和 SDWebImage 都是成熟且稳定的解决方案，极大提升开发效率和用户体验。

SwiftUI 07-图像加载实战：为何我只用 `Image` 和 Kingfisher