How can I convert a Base64 string to an image in SwiftUI?

Converting a Base64 string to an image in SwiftUI involves several steps. First, you need to decode the Base64 string to data, then convert that data into a UIImage (or NSImage on macOS), and finally, you can display it in your SwiftUI view using an Image view. Here’s a breakdown of how to do this:

1. Decoding the Base64 String:

- Start by extending the String class to add a function that attempts to convert a Base64 encoded string into Data. This handles the possibility of invalid base64 strings.

- The Data(base64Encoded:) initializer does the heavy lifting for you.

extension String {
  func base64ToData() -> Data? {
    return Data(base64Encoded: self)
  }
}

2. Converting Data to UIImage (or NSImage):

- Next, use the decoded Data to create either a UIImage (on iOS/iPadOS) or a NSImage (on macOS). You'll want to handle the case where the data cannot be converted to an image.

import SwiftUI
#if os(iOS)
import UIKit
typealias PlatformSpecificImage = UIImage
#elseif os(macOS)
import AppKit
typealias PlatformSpecificImage = NSImage
#endif

extension Data {
  func toImage() -> PlatformSpecificImage? {
    #if os(iOS)
    return UIImage(data: self)
    #elseif os(macOS)
    return NSImage(data: self)
    #endif
  }
}

3. Displaying the Image in SwiftUI:

- In your SwiftUI view, use an Image view to display the UIImage/NSImage. You might need to convert it to a SwiftUI-compatible Image type.

struct Base64ImageView: View {
  let base64String: String
  @State private var image: Image? = nil

  var body: some View {
    Group {
      if let image = image {
        image
        .resizable()
        .scaledToFit()
      } else {
        Text("Loading image...")
      }
    }
    .onAppear(perform: loadImage)
  }

  func loadImage() {
    guard let imageData = base64String.base64ToData(), let platformImage = imageData.toImage() else {
      print("Failed to create image from Base64 string")
      return
    }
    #if os(iOS)
    self.image = Image(uiImage: platformImage)
    #elseif os(macOS)
    self.image = Image(nsImage: platformImage)
    #endif
  }
}

4. Usage:

- Pass your Base64 string to the Base64ImageView.

struct ContentView: View {
   let base64String = "YOUR_BASE64_ENCODED_STRING_HERE"

   var body: some View {
     Base64ImageView(base64String: base64String)
   }
}

This will convert and display the Base64 image in your SwiftUI view. Remember to replace "YOUR_BASE64_ENCODED_STRING_HERE" with your actual Base64 string. Error handling is included to manage issues during data or image conversion, which prevents unexpected app crashes due to invalid base64 or data issues.

Learn more about this