You have added the name and address of the restaurant to the screen. With the name and address views all set, the next thing you will do is add an image for the restaurant and customize its appearance. When using storyboards, you'll need to add an image to the Assets.xcassets file, use an image view to display the image, and use the Attribute inspector to modify its appearance. In SwiftUI, you still need to add an image to the Assets.xcassets file, but after that, you'll create a custom view that applies a mask, border, and drop shadow to the image. Note that this was not present in the original Restaurant Detail screen (restaurant images were shown in the Restaurant List screen), but let's do it here so you will know how it's done. 

You'll start by adding an image to the project's asset catalog. Perform the following steps:

1. Find taptrailhouse.jpg inside the resources folder in the Chapter25 folder of the code bundle downloadable from https://github.com/PacktPublishing/iOS-13-Programming-for-Beginners.

2.  Click Assets.xcassets in the Project navigator. Drag taptrailhouse.jpg into the editor. Xcode creates a new image set for this image:

3. Now, you'll create a new SwiftUI view to display this image. Choose File | New | File to open the template selector.
4. iOS should already be selected. In the User Interface section, click to select SwiftUI View and click Next.
5. Name the file CircleImage.swift and click Create. It appears in the Project navigator.
6. Modify the code as shown to replace the text view with the image of The Tap Trailhouse by using the Image(_:) initializer:

struct CircleImage: View {
    var body: some View {
        Image("taptrailhouse")
    }
}

7. The Preview area displays the image:

8. Modify the code as shown to clip the image to a circle using the .clipshape(Circle()) modifier:

struct CircleImage: View {
    var body: some View {
        Image("taptrailhouse")
            .clipShape(Circle())
    }
}

9. Modify the code as shown to overlay the image with a white border:

struct CircleImage: View {
    var body: some View {
        Image("taptrailhouse")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, 
                lineWidth: 4))
    }
}

10. Modify the code as shown to add a shadow to the image with a 10-point radius:

struct CircleImage: View {
    var body: some View {
        Image("taptrailhouse")
        .clipshape(Circle())
        .overlay(Circle().stroke(Color.white, 
           lineWidth: 4))
        .shadow(radius: 10)
    }
}

11. This completes the image view. The Preview area should look like this:

You've added an image to your project, and applied a custom mask, border, and drop shadow to it. Later, you will add it to your Restaurant Detail screen, but for now, let's see how you can use UIKit and SwiftUI views together to add a map to the Restaurant Detail screen. You will do this in the next section.