How to Display Image from Assets in iOS SwiftUI

In this blog post, we’ll not only explore how to load and display images in SwiftUI from your Asset Catalog but also guide you through the process of adding images to your Xcode project. Images play a pivotal role in crafting a visually striking user interface and enhancing user experience, and understanding how to handle images in SwiftUI is essential for every iOS developer.

Add Images to Your Xcode Project

Before we can use images in SwiftUI, we need to add them to our Xcode project’s Asset Catalog. Here’s how:

• Open your Xcode project.
• In the Project Navigator on the left, select Assets.
• In the center pane, right-click, select Import, and navigate to your image file.

Your image is now added to your project’s Asset Catalog and is ready to be used within your SwiftUI views!

Load an Image in SwiftUI

Once the image is in your Asset Catalog, loading it in SwiftUI is a breeze. You use the Image view and provide the name of your image as a string:

Image("your_image_name")

With this code, SwiftUI will look for an image named “your_image_name” in your Asset Catalog and display it in your view.

Make Images Resizable

You may want your images to adapt to the layout of your app. SwiftUI provides the .resizable() modifier for this purpose. This modifier makes your image scale to fit its frame:

Image("your_image_name")
    .resizable()

Here, the image “your_image_name” is made resizable to fit its container.

Control Image Scaling

Beyond just making images resizable, SwiftUI allows you to control the scaling behavior with the .scaledToFit() and .scaledToFill() modifiers. .scaledToFit() scales the image to fit its frame while maintaining the image’s aspect ratio. On the other hand, .scaledToFill() scales the image to fill its frame, potentially altering the aspect ratio to ensure the frame is entirely covered.

Image("your_image_name")
    .resizable()
    .scaledToFit()

In this instance, the image scales to fit its frame, keeping its original aspect ratio.

Being proficient in handling images in SwiftUI, from adding them to your Xcode project to displaying and controlling them in your SwiftUI views, is a key skill in iOS development. It enables you to design visually appealing apps and deliver an engaging user experience. With SwiftUI’s intuitive Image view and its powerful modifiers, managing images in your apps is both efficient and enjoyable.