Image instead of text when button is pressed, how to?

For the public void SetZone() function you see that when the button is pressed text is filled in. I want to change that to an image. That is the image only appears on the button once it's pressed. I've tried followed tutorials but they are never 1 to 1 solutions and I'm too new to know how to adapt it to my specific needs. Any help would be appreciated.

Code (CSharp):

1. using UnityEngine.UI;
2. using System.Collections;
3. using UnityEngine;
4.  
5. public class GridSpace : MonoBehaviour
6. {
7.  
8.     public Button button;
9.     public Text buttonText;
10.     public string playerPiece;
11.  
12.  
13.     private GameController gameController;
14.  
15.     public void SetGameControllerReference(GameController controller)
16.     {
17.         gameController = controller;
18.     }
19.  
20.     public void SetSpace()//this is allowing the buttons to fill in with x and o
21.     {
22.         buttonText.text = gameController.GetPlayerSide();
23.         button.interactable = false;
24.         gameController.EndTurn();
25.     }
26.  
27.     public void SetPiece()
28.     {
29.         buttonText.text = gameController.GetColorPiece();
30.         button.interactable = false;
31.      
32.     }
33.  
34.     public void SetZone()//this is allowing the buttons to fill in with the text from the player piece field in the inspector
35.     {
36.      
37.         buttonText.text = playerPiece;
38.      
39.         button.interactable = false;
40.      
41.     }
42.  
43. }

 

Depends. Either add a variable for the Image component on the button itself and then swap the sprite or add a child that is an Image and swap the sprite on it. Either way, you need an Image variable.

 

Yeah kinda need more details on how to do all that. I don't know what "swap the sprite" means. I know where to add a sprite in the inspector of the game object. I don't know if that's what "swap" means.

An image variable would be a string?

What do I replace buttonText.text with? buttonImage.image = (the name here is the variable name that I put the image into on the inspector)?

 

Basic idea. Image is a ui object, you can add it as a child. Just right click on an existing gameObject in your scene (your button in this case) select UI->Image.

Here is Unity's example. https://docs.unity3d.com/2018.3/Documentation/ScriptReference/UI.Image-sprite.html

Mine was just a quick type up.

Code (CSharp):

1. public Image anImage;
2.  
3. public void SwapSprite()
4. {
5.    anImage.sprite = anotherSprite;
6. }

 

have you tried this?