I’m at lesson 10 in the following tutorial 2021 SwiftUI Tutorial for Beginners (3.5 hour Masterclass) - YouTube but I’m attempting to implement this in my own project. I’m attempting to implement a button but with an image as you’re doing however my image doesn’t get displayed. I have my image in the Assets.xcassets folder and it displays when instantiating an image object on its own. Attempting to put that image in the button object however, only displays a blank gray button. I need to also clarify that I’m attempting to create a mac os app, not an ios app. I have the following code:
HStack {
Button(action: {}, label: {
Image(“system-software-update”)
})
//Image(“system-software-update”)
Image(“system-search”)
Image(“cancel”)
Image(“help”)
}
Where “system-software-update” is the name of my image in the xcassets folder but it’s not being rendered. I’ve also noticed that when I type Button and the drop down appears to give me the options of the Button method to choose, it doesn’t give me all the other types with the differing parameters etc. It only gives me the basic Button struct option with no parameters at all, so I’m a little confused at to why that is also. One last thing, everything online shows people using UIKit and all the functions contained therein, and showing a completely different way to do things so there’s not much help out there online in doing it the way in the video. I’m using xcode version 13.2.1 and running on a macbook pro 2017 15 inch with big sur as the OS version. Anybody have any idea what’s going on? To be honest the image isn’t super high quality, a .png image. Could this be due to the resolution?
Welcome to the community.
Try this:
HStack {
Button(action: {
// Action code goes here
}, label: {
Image(“system-software-update”)
.resizable()
.scaledToFit()
})
Also when adding code to your post, to format the code nicely, place 3 back-ticks ``` on the line above your code and 3 back-ticks ``` on the line below your code. Like this:
```
Code goes here
```
The 3 back-ticks must be the ONLY characters on the line. The back-tick character is located on the same keyboard key as the tilde character ~ (which is located below the Esc key). You can also highlight an entire code block and click the </> button on the toolbar to wrap the block for you.
This also makes it easier for anyone assisting as they can copy the code and carry out some testing.
Hey thank you so much for the welcome and the heads up on the ``` to format code in my thread! Also thanks for your answer. It works! Although now I’m attempting to add a label to the button using a vstack inside of the button and now that’s not working. Any info on that would be greatly appreciated but I will also mess around for a bit to see if I can get it to work.
Do you mean that you want to overlay some text onto the Image? What does the “system-software-update” Image look like?
Hi. The image looks like so. Don’t judge please haha. I will most likely use something better in the future. This is more of a general question about adding text to image buttons so that the button has a one word description of what it does like many apps have.
I want to have the image as a button but also display the words “Fix All” to the button at the bottom. I attempted to do this with a VStack but then the button went back to just being a gray blank button.
I did this:
Button(action: {
}, label: {
Image("system-software-update").resizable().scaledToFit()
Text("Fix All")
})
And the text went onto the button but trailing the button image to its right, horizontally. I’d like the text to go below the image of the button at the bottom.
Wrap the Image and Text in a VStack.
You will have to restrict the frame size of the image otherwise it will expand to occupy as much space as it can. As roosterboy has suggested, place the two Views in a VStack. Do something like this:
HStack {
Button(action: {
// Action code goes here
}, label: {
VStack {
Image("system-software-update")
.resizable()
.scaledToFit()
.frame(width: 44, height: 44)
Text("Fix All")
}
})
}
Just a tip regarding modifiers. I don’t advocate stringing modifiers one after the other. It’s much more readable to have them on their own line below the View they are being applied to. Ie: don’t do this:
Image("system-software-update").resizable().scaledToFit().frame(width: 44, height: 44)