Display Image on imageview JavaFx

Question

I have a .fxml file with some empty rectangules inside a grind

<AnchorPane id="AnchorPane" prefHeight="700.0" prefWidth="650.0"     styleClass="fondo2" stylesheets="@tablerolote.css"     xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"     fx:controller="juegoloto.CartonController">


    <children>
          <GridPane gridLinesVisible="true" layoutX="11.0" layoutY="44.0"     prefHeight="614.0" prefWidth="474.0" styleClass="fondo">
            <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 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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <ImageView id="1" fitHeight="127.0" fitWidth="93.0" pickOnBounds="true" preserveRatio="true" />
            <ImageView id="2" fitHeight="127.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" />
            <ImageView id="3" fitHeight="126.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" />
            <ImageView id="4" fitHeight="127.0" fitWidth="97.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" />

         </children>
      </GridPane>

   </children>
</AnchorPane>

it was created automatically with netbeans (drag and drop interface), how do i send and image to display in the ImageView id="2" /ImageView id="3" etc, from the .java file

public void start(Stage stage) throws Exception {
    Parent root = FXMLLoader.load(getClass().getResource("Carton.fxml"));

    Scene scene = new Scene(root);


    stage.setScene(scene);
    stage.show();
}

i also have a controller.java file but i dont know what to do with it

public class CartonController implements Initializable {

@FXML
private Label label;

@FXML


@Override
public void initialize(URL url, ResourceBundle rb) {
    // TODO
}    

}

Set the images from your [controller class](http://docs.oracle.com/javase/8/javafx/api/javafx/fxml/doc-files/introduction_to_fxml.html#controllers). — James_D, Oct 24 '15 at 19:36

James_D · Accepted Answer · 2015-10-24T20:16:36.490

You should do this in the controller class. How to use controllers is described in full in the FXML reference, but in short:

Put an fx:id on the ImageViews (you can do this in SceneBuilder):

<AnchorPane id="AnchorPane" prefHeight="700.0" prefWidth="650.0"     styleClass="fondo2" stylesheets="@tablerolote.css"     xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"     fx:controller="juegoloto.CartonController">


    <children>
          <GridPane gridLinesVisible="true" layoutX="11.0" layoutY="44.0"     prefHeight="614.0" prefWidth="474.0" styleClass="fondo">
            <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 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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <ImageView id="1" fx:id="imageView1" fitHeight="127.0" fitWidth="93.0" pickOnBounds="true" preserveRatio="true" />
            <ImageView id="2" fx:id="imageView2" fitHeight="127.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" />
            <ImageView id="3" fx:id="imageView3" fitHeight="126.0" fitWidth="96.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" />
            <ImageView id="4"  fx:id="imageView4" fitHeight="127.0" fitWidth="97.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" />

         </children>
      </GridPane>

   </children>
</AnchorPane>

Then inject these into your controller and you can access them as needed:

public class CartonController implements Initializable {

@FXML
private ImageView imageView1 ;

@FXML
private ImageView imageView2 ;

@FXML
private ImageView imageView3 ;

@FXML
private ImageView imageView4 ;    

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        imageView1.setImage(new Image(...));
        // etc...
    }    

}

Hi! thank for your answer, but i stll have a problem , in the initialize method /// File file = new File("1.jpg"); if(file.exists()){ System.out.println(file.getAbsolutePath()); Image image = new Image(file.toURI().toString()); carta1.setImage(image); }else{ System.out.println("File not found"); } /// i have that, and i get a message saying that the file not found, and the image is in the same directory with the rest of the files :/ — Erick Reyes, Oct 27 '15 at 02:53
That's a different question, which is already addressed many times on SO. For example: http://stackoverflow.com/questions/33305037/javafx-images-path — James_D, Oct 27 '15 at 03:06

score 0 · Answer 2 · answered Oct 24 '15 at 19:42

You can define a method to retrieve the ImageView:

public ImageView findById(AnchorPane root, String id) {
  for (Node child : root.getChildren()) {
    if (child instanceof ImageView && child.getId().equals(id)) {
      return (ImageView)child;
    }
  }
  return null;
}

This method will iterate through all direct children of the root AnchorPane and check the ImageView node for it's ID. If no matching node is found, null will be returned. From there you can use the setImage method on the returned ImageView.

Display Image on imageview JavaFx

2 Answers2