How to show image in SwiftUI

In this tutorial, we will learn how to display an image in SwiftUI. We will learn about the 2 methods through which we can show an image. We will require 2 packages, pre-installed with Xcode 16, so make sure Xcode is updated to the latest version. Here we will go through the process of uploading an image to both a real project and Swift playground as they differ.

Uploading an image to Xcode Project

Before writing the code, we must upload the image to Xcode so it can access its features. Firstly, you must locate the file on your computer, and then copy it to Xcode. Simply drag and drop the file in the Assets.xcassets folder, and once you do that you should be able to see the images on the right.

How to show image in SwiftUI

Show an Image using Image()

Once you have uploaded the image, the easiest way to show and manipulate the image is through the Image() function. Within the ContentView of your Xcode project. Then, simply use the code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("DiceOne").    
    }
}

Here “DiceOne” is the name of the image, make sure it is spelled exactly the way as uploaded in the Assets.xcassets folder. Currently, Xcode 16 supports the following image file types: .tiff, .jpeg, .gif, .png, .dib, .ico, .cur and .xbm. 

Show an ImageView Object

Another simple method of adding an image to Swift UI is using the ImageView object. Firstly, on your storyboard, you must create a UI Image object from the library. This can be done by clicking the “+” sign on the top right of your screen and simply searching for UI ImageView. Once you locate it, simply drag and drop it onto the ViewController and resize it as required.

Show an ImageView Object

Once you have created the object, you must link it with the ContentView. To do so, simply call the Assistant by clicking on the Editor Panel, or using the shortcut Cmd + Opt + Crtl + Enter. When the assistant is open, hold while holding option drag the UIImageView object onto the Assistant Panel. This will create an IBOutlet, which acts as a connection to change the value of the ImageView. You can access this by creating an ImageViewObject like:

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var diceImageView1: UIImageView!
    
        diceImageView1.image = ImageLiteral
      }

}

The ImageLiteral is a syntax in Swift that easily allows you to access the images that you uploaded in the Assets.xcassets folder. Once you type the syntax “ImageLiteral”, Swift will automatically interpret it and ask you to choose which image you want to display. Once you select the image and run your app, by pressing the run button or simply Cmd + R, the simulator will show the image.

Show an Image on Swift Playgrounds

Unlike other Xcode templates, Swift Playgrounds is more of a Code Editor rather than an IDE. To upload an image to the playground, first, we need to find the resource folder, using the shortcut Cmd + 1, and then drag and drop the image file within the folder. Then, we can use an NSImage. Any NS object is the base object type used in Swift, which essentially means that it recognizes all types of files and their classes, expanding even to Objective-C. We can use this to show our image by:

import Cocoa
import SwiftUI

var image = NSImage(named: "j.jpeg")

“j.jpeg” is the image file name, and basically what the NSImage does is creates a copy of the original image and display the size and the image itself. You can use this in the playground to create smaller projects to learn about Xcode before going into professional development.

Leave a Reply

Your email address will not be published.