NetBeans – how to use the scenario builder to create image buttons on Java fxml?

I'm using NetBeans and want to replace boring buttons with media files on my desktop

So this is my code I want it, so the image becomes a button

<Button layoutX="252.0" layoutY="177.0" mnemonicParsing="false" prefHeight="57.0" prefWidth="135.0" text="Button!" textFill="BLUE">
     <font>
        <Font name="Avenir Next Regular" size="13.0" />
     </font>
  </Button>

Thanks in advance:)

Solution

In the fxml file, import the image package:

<?import javafx.scene.image.*?>

Then just before the button, assume image PNG is located in the "images /" directory, "images /" and Fxml is in the same directory:

<fx:define>
   <Image fx:id="btnImage" url="images/image.png" />
</fx:define>

Then simply add the following to the button definition

<Button layoutX="252.0" layoutY="177.0" mnemonicParsing="false" prefHeight="57.0" prefWidth="135.0" text="Button!" textFill="BLUE">
     <font>
        <Font name="Avenir Next Regular" size="13.0" />
     </font>

     <graphic>
        <ImageView image="$btnImage" />
     </graphic>
  </Button>