How to add Images to Swift Playground for iPad?

Question

Created Nov ’20

Replies 2

Boosts 0

Views 3.9k

Participants 2

I am trying to do this tutorial on my iPad (don’t have a Mac running Xcode): https://developer.apple.com/tutorials/swiftui/creating-and-combining-views#Create-a-Custom-Image-View

I’m getting stuck at the point where I want to add an image.

I did manage to import an image to my resources (the box behind the plus sign at the top right of the screen). Now when I reference the image’s name in code I don’t get an error but I also don’t get to see the image. When I try to tap-image-to-include-in-the-code I get a little emoji like thing that looks like an image but how is that supposed to work? If I just put it on a line of code I throws the error “build block requires URL to conform to View”

Code Block struct CircleImage: View {
    var body: some View {
        VStack(alignment: .center) {
            Text("image following")
			 fileLiteral(resourceName: "Foto.png")
            Image("IMG_1249.png")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.black, lineWidth: 4))
            .shadow(radius: 10)
     
        }
    }
}

Answered by Tylor in 647873022

I tested this out on my iPad with playgrounds 3.4, and for me, it also didn't work except that it said that there was a problem and check the code for mistakes. I added resizable and frame modifiers to the Image view which allowed it to load inside the app. For the image, I just added it using the blue plus in the upper right corner of the app.

Code Block  SwiftImage(uiImage: #imageLiteral(resourceName: "Photo.png"))
	.resizable()
	.frame(width: 200, height: 200)
	.clipShape(Circle())

Boost

Answer 1

Tylor OP

Nov ’20

Accepted Answer

I tested this out on my iPad with playgrounds 3.4, and for me, it also didn't work except that it said that there was a problem and check the code for mistakes. I added resizable and frame modifiers to the Image view which allowed it to load inside the app. For the image, I just added it using the blue plus in the upper right corner of the app.

Code Block  SwiftImage(uiImage: #imageLiteral(resourceName: "Photo.png"))
	.resizable()
	.frame(width: 200, height: 200)
	.clipShape(Circle())

3

Answer 2

MDeuschl OP

Nov ’20

Wow, that works. Thank you! So basically I just had to include a uiImage: which wasn’t in the original code and add your three line to get the image to display properly.

Took me some try and error - because some of the code displays as a thumbnail and I had to figure out which code to include and which is included in the [Thumb].

When I copy&paste my working code here it looks like this:

Code Block struct CircleImage: View {
    var body: some View {
        Image(uiImage:  imageLiteral(resourceName: "Foto.png"))
            .resizable()
            .frame(width: 200, height: 200)
            .clipShape(Circle())
    }
}

in the playground App the line Image(uiImage.... looks like this:

Image(uiImage: [Thumbnail])

Thanks again, big help!

1