Skip to content

Showing a UIImage in SwiftUI

SwiftUI, UIImage, iOS development1 min read

Have you ever wondered how to show a UIImage in SwiftUI? In this article, we'll explore different methods to achieve this, whether you're working with iOS development or building an app using SwiftUI. Let's dive in!

Method 1: Using Image(uiImage:)

One of the simplest ways to display a UIImage in SwiftUI is by utilizing the Image view and passing a uiImage parameter. This method is more SwiftUI-oriented and avoids mixing UIKit components with SwiftUI code.

To display a UIImage using this method, follow these steps:

  1. Create a SwiftUI view and use the Image view with the uiImage parameter:

    1struct ContentView: View {
    2 let myImage = UIImage(named: "my_image")
    4 var body: some View {
    5 VStack {
    6 Text("My Image")
    7 Image(uiImage: myImage)
    8 .resizable()
    9 .aspectRatio(contentMode: .fit)
    10 .frame(width: 200, height: 200)
    11 }
    12 }

By employing the Image(uiImage:) initializer and applying necessary modifiers like .resizable() and .aspectRatio(), you can effectively display a UIImage with SwiftUI.

Method 2: Using UIImageView

Another approach to showing a UIImage in SwiftUI is by utilizing the UIImageView component. Although SwiftUI provides its own image view, it's often more convenient to leverage UIKit's UIImageView for this specific task.

To use UIImageView in SwiftUI, follow these steps:

  1. Create a hosting UIViewRepresentable wrapper for UIImageView, like so:

    1import SwiftUI
    2import UIKit
    4struct ImageViewWrapper: UIViewRepresentable {
    5 let image: UIImage?
    7 func makeUIView(context: Context) -> UIImageView {
    8 let imageView = UIImageView()
    9 imageView.contentMode = .scaleAspectFit
    10 return imageView
    11 }
    13 func updateUIView(_ uiView: UIImageView, context: Context) {
    14 uiView.image = image
    15 }
  2. With the wrapper defined, you can now use it within your SwiftUI views. Simply pass a UIImage instance to the ImageViewWrapper and add it to your view hierarchy:

    1struct ContentView: View {
    2 let myImage = UIImage(named: "my_image")
    4 var body: some View {
    5 VStack {
    6 Text("My Image")
    7 ImageViewWrapper(image: myImage)
    8 .frame(width: 200, height: 200)
    9 }
    10 }

By following these steps, you can easily display a UIImage in SwiftUI using the UIImageView component.


In this article, we explored two methods for displaying a UIImage in SwiftUI. You can either use the UIImageView wrapper or leverage the Image view's uiImage parameter. Both methods offer flexibility and ease of use when incorporating UIImage objects into your SwiftUI projects. Remember to choose the approach that best suits your specific needs.

Whether you prefer the familiarity of UIKit with UIImageView or opt for a more SwiftUI-centric solution using Image(uiImage:), you now have the knowledge to effortlessly incorporate UIImage instances into your SwiftUI views.