ImageView not showing Image - JavaFX

Question

I have some code in Java fx controller class as below. The images are not showing up. Images are in place, no errors. Please guide.

@Override
public void initialize(URL location, ResourceBundle resources) {
    image1 = new Image(getClass().getResource("php81e3DF.png").toExternalForm());
    image2 = new Image(getClass().getResource("phpqJypee.png").toExternalForm());
    image3 = new Image(getClass().getResource("php2XSnrZ.png").toExternalForm());
    defaultt = new Image(getClass().getResource("phpxrxh4T.png").toExternalForm());

    imgVw1 = new ImageView();
    imgVw1.setX(200);
    imgVw1.setY(200);
    imgVw2 = new ImageView();
    imgVw3 = new ImageView();

    imgVw1.setImage(image1);
    imgVw2.setImage(image2);
    imgVw3.setImage(image3);
}

I am not able to make the images show up. I am sure the fxml and the controller class are using proper annotations. I used proper @fxml in the class and no errors with variables.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane fx:id="rootPane" alignment="TOP_CENTER" hgap="10" vgap="10" xmlns="http://javafx.com/javafx/8.0.172-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <GridPane hgap="2.0" vgap="2.0">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <GridPane.margin>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </GridPane.margin>
         <children>
            <ImageView fx:id="imgVw1" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
            <ImageView fx:id="imgVw2" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" />
            <ImageView fx:id="imgVw3" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" />
            <Button fx:id="imageV1Button" mnemonicParsing="false" onAction="#button1Pressed" text="Flip" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
            <Button fx:id="imageV2Button" mnemonicParsing="false" onAction="#button1Pressed" text="Flip" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
            <Button fx:id="imageV3Button" mnemonicParsing="false" onAction="#button1Pressed" text="Flip" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP" />
         </children>
      </GridPane>
   </children>
   <columnConstraints>
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
   </rowConstraints>
</GridPane>

If you have the appropriate `fx:id`s in the FXML file and the corresponding fields in the controller class, then remove the manual instantiation of the `ImageView`s. It is the responsibility of the `FXMLLoader` to create the objects and inject them into your controller; all you're doing is replacing those objects with other objects not linked to the visible scene graph. — Slaw, Sep 11 '19 at 04:41

0009laH · Answer 1 · 2019-09-11T08:26:22.407

You don't have to add those lines of code:

imgVw1 = new ImageView();
imgVw2 = new ImageView();
imgVw3 = new ImageView();

What happens when you do this is:

FXMLLoader reads your FXML file to initialize the entire GridPane : imgVw1, imgVw2 and imgVw3 are created and added to rootPane's children list.
You define new values for imgVw1, imgVw2 and imgVw3, which means they no longer equal the value which has been defined into the FXML. So automatically, re-assignation makes your components disappear from rootPane's children list, and none of your ImageViews will be displayed.

Deleting the 3 lines should solve your problem (at least it worked for me ☻).

ImageView not showing Image - JavaFX

1 Answers1