SwiftUI如何基于二进制数据设置并显示UIImage？

我在SwiftUI应用中尝试显示图片，通过向NestJS API发送HTTP请求获取图片，该API返回以Buffer（二进制数据）编码的图片。Swift端收到的数据结构如下：

{
  "name": "this_test",
  "image": {
    "type": "Buffer",
    "data": [
      255,
      216,
      255,
      224,
      ...
    ]
  }
}

我定义了以下模型类：

import Foundation

struct Buffer: Codable {
    var type: String
    var data: [UInt8]
}

class Tester: Codable {
    public var name: String
    public var image: Buffer
}

我的尝试代码如下：

do {
  let decoder = JSONDecoder()
  let decodedResponse = try decoder.decode(Tester.self, from: data)
  self.image = UIImage(data: decodedResponse.image.data)

} catch {
  print("Can't parse JSON..")
  return
}

请问该如何正确解码并显示这张图片？

解决方案 #

你的核心思路没问题，只需修正几个关键细节即可：

1. 转换UInt8数组为Data类型 #

UIImage(data:)要求参数为Data类型，你直接传入[UInt8]数组会导致类型不匹配，需要做转换：

let imageData = Data(decodedResponse.image.data)
self.image = UIImage(data: imageData)

2. SwiftUI中正确展示UIImage #

如果你的self.image是UIImage?类型，在视图中需要用Image(uiImage:)包装，并处理可选值：

// 假设ViewModel中定义了可观察的图片变量
@Published var image: UIImage?

// 在View中渲染
if let uiImage = image {
    Image(uiImage: uiImage)
        .resizable()
        .scaledToFit()
} else {
    ProgressView("加载图片中")
}

3. 完善错误排查逻辑 #

不要只打印模糊的错误信息，输出具体错误内容能快速定位问题：

do {
    let decoder = JSONDecoder()
    let decodedResponse = try decoder.decode(Tester.self, from: data)
    let imageData = Data(decodedResponse.image.data)
    guard let uiImage = UIImage(data: imageData) else {
        print("图片数据无效，无法生成UIImage")
        return
    }
    self.image = uiImage
} catch {
    print("解码或图片转换错误: \(error.localizedDescription)")
    print("错误详情: \(error)")
    return
}

额外注意 #

• 确认NestJS返回的Buffer是完整的标准格式图片数据（如JPG/PNG），数据损坏或格式错误会导致UIImage初始化失败返回nil；
• 若图片体积较大，建议将解码逻辑放在后台队列执行，避免阻塞UI。

内容的提问来源于stack exchange，提问作者anon