title: Java FXML: Why is my imageView not Showing, and how can I upload an image from my computer?
body: <p>I'm doing a project where I need to upload an image and apply some filter to it. For that I am using javaFx FXML. It is the first time I am using this tool, so I am a bit(lot) lost. I created a simple interface using fxml controler and I added some buttons and also an imageView field. In the image view fiel I also added a default image that appears normally while I am in applying it, but it wont show the image when I actually run the project, all I see is a blank space where the picture was supposed to be. Does someone know why it happens?
  Plus as you guys are going to see in the code, I would like to know how I can have access to the imageView src so I can upload an image and change it at anytime using JFileChooser. Thank you very much.</p>
  
  <pre><code>Controler
  
  /*
   * To change this license header, choose License Headers in Project Properties.
   * To change this template file, choose Tools | Templates
   * and open the template in the editor.
   */
  package fotofinish;
  
  import java.awt.BorderLayout;
  import java.io.File;
  import java.net.URL;
  import java.util.ResourceBundle;
  import javafx.beans.value.ChangeListener;
  import javafx.beans.value.ObservableValue;
  import javafx.event.ActionEvent;
  import javafx.event.Event;
  import javafx.fxml.FXML;
  import javafx.fxml.Initializable;
  import javafx.scene.control.Button;
  import javafx.scene.control.ColorPicker;
  import javafx.scene.control.Label;
  import javafx.scene.control.MenuItem;
  import javafx.scene.control.RadioButton;
  import javafx.scene.control.Slider;
  import javafx.scene.control.TextField;
  import javafx.scene.control.ToggleGroup;
  import javafx.stage.FileChooser;
  import javafx.stage.FileChooser.ExtensionFilter;
  import javax.swing.ImageIcon;
  import javax.swing.JFileChooser;
  import javax.swing.JLabel;
  import javax.swing.JPanel;
  
  /**
   *
   * @author user
   */
  public class FXMLDocumentController implements Initializable {
      private JPanel      jpanel, jpanelbar;
       JLabel              image;
      private Label label;
      @FXML
      private Button filterGrayscaleButton;
      @FXML
      private Button filterSepiaButton;
      @FXML
      private Button filterInstantButton;
      @FXML
      private Button filterCustomButton;
      @FXML
      private Button filterNoneButton;
      @FXML
      private Slider brightnessSlider;
      @FXML
      private Slider contrastSlider;
      @FXML
      private ToggleGroup brushTypeRadioGroup;
      @FXML
      private RadioButton brushTypeCircleRadioButton;
      @FXML
      private RadioButton brushTypeSpraypaintRadioButton;
      @FXML
      private RadioButton brushTypeSquareRadioButton;
      @FXML
      private MenuItem menubarHelpFotoFinishHelpMenuItem;
      @FXML
      private MenuItem menubarHelpAboutMenuItem;
      @FXML
      private Label filtersLabel;
      @FXML
      private Label sliderLabel;
      @FXML
      private Label brightnessLabel;
      @FXML
      private Label contrastLabel;
      @FXML
      private Label drawingLabel;
      @FXML
      private ColorPicker brushColorPicker;
      @FXML
      private Label brushTypeLabel;
      @FXML
      private Label brushSizeLabel;
      @FXML
      private TextField brushSizeTextField;
      @FXML
      private MenuItem menubarFileNew;
      @FXML
      private MenuItem menubarFileOpen;
      @FXML
      private MenuItem menubarFileGalleryButterfly;
      @FXML
      private MenuItem menubarFileGalleryTeddyBear;
      @FXML
      private MenuItem menubarFileGalleryPrincess;
      @FXML
      private MenuItem menubarFileGalleryFirefighter;
      @FXML
      private MenuItem menubarFileSave;
      @FXML
      private MenuItem menubarFileSaveAs;
      @FXML
      private MenuItem menubarFileQuit;
  
      @Override
      public void initialize(URL url, ResourceBundle rb) {
          //TODO: make call function only when value changes by certain threshold
          brightnessSlider.valueProperty().addListener(new ChangeListener&lt;Number&gt;() {
              @Override
              public void changed(ObservableValue&lt;? extends Number&gt; observable, Number oldValue, Number newValue) {
                  System.out.println("TODO: brightness changed to " + newValue);
              }
          });
  
          contrastSlider.valueProperty().addListener(new ChangeListener&lt;Number&gt;() {
              @Override
              public void changed(ObservableValue&lt;? extends Number&gt; observable, Number oldValue, Number newValue) {
                  System.out.println("TODO: contrast changed to " + newValue);
              }
          });
      }
  
      @FXML
      private void applyFilterGrayscale(ActionEvent event) {
          System.out.println("TODO: grayscale filter applied");
      }
  
      @FXML
      private void applyFilterSepia(ActionEvent event) {
          System.out.println("TODO: sepia filter applied");
      }
  
      @FXML
      private void applyFilterInstant(ActionEvent event) {
          System.out.println("TODO: instant filter applied");
      }
  
      @FXML
      private void createFilterCustomPopup(ActionEvent event) {
          System.out.println("TODO: launched custom filter popup");
      }
  
      @FXML
      private void applyFilterNone(ActionEvent event) {
          System.out.println("TODO: none filter applied");
      }
  
      @FXML
      private void changeBrushTypeCircle(ActionEvent event) {
          System.out.println("TODO: brush type changed to circle");
      }
  
      @FXML
      private void changeBrushTypeSquare(ActionEvent event) {
          System.out.println("TODO: brush type changed to square");
      }
  
      @FXML
      private void changeBrushTypeSpraypaint(ActionEvent event) {
          System.out.println("TODO: brush type changed to spraypaint");
      }
  
      @FXML
      private void displayHelpDoc(ActionEvent event) {
          System.out.println("TODO: launched help document");
      }
  
      @FXML
      private void displayAboutDialog(ActionEvent event) {
          System.out.println("TODO: created about dialog");
      }
  
      @FXML
      private void changeBrushColor(ActionEvent event) {
          System.out.println("TODO: brush color changed to &lt;BRUSH COLOR&gt;");
      }
  
      @FXML
      private void adjustBrushSize(ActionEvent event) {
          System.out.println("TODO: brush size changed to &lt;BRUSH SIZE&gt;");
      }
  
      @FXML
      private void openFile(ActionEvent event) {
          System.out.println("TODO: launched file picker");
          JFileChooser fileChooser = new JFileChooser();
          fileChooser.showOpenDialog(null);
          File f = fileChooser.getSelectedFile();
          System.out.print(f.getAbsolutePath());
          //image = new JLabel("", new ImageIcon(f.getAbsolutePath()), JLabel.CENTER);
          //jpanel.add(image, BorderLayout.CENTER);
          //jpanel.revalidate(); //ADD THIS AS WELL
          //jpanel.repaint();
      }
  
      @FXML
      private void openFileGalleryButterfly(ActionEvent event) {
          System.out.println("TODO: opened butterfly file from gallery");
      }
  
      @FXML
      private void openFileGalleryTeddyBear(ActionEvent event) {
          System.out.println("TODO: opened teddy bear file from gallery");
      }
  
      @FXML
      private void openFileGalleryPrincess(ActionEvent event) {
          System.out.println("TODO: opened princess file from gallery");
      }
  
      @FXML
      private void openFileGalleryFirefighter(ActionEvent event) {
          System.out.println("TODO: opened firefighter file from gallery");
      }
  
      @FXML
      private void saveFile(ActionEvent event) {
          System.out.println("TODO: saved file");
      }
  
  
      @FXML
      private void saveFileAs(ActionEvent event) {
          System.out.println("TODO: launched file save as dialog");
      }
  
  
      @FXML
      private void quit(ActionEvent event) {
          System.exit(1);
          System.out.println("TODO: quit program");
      }
  
      @FXML
      private void createNewFile(ActionEvent event) {
          System.out.println("TODO: created new file");
      }
  }
  </code></pre>
  
  <p>FXML`</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.scene.input.*?&gt;
  &lt;?import javafx.scene.image.*?&gt;
  &lt;?import java.lang.*?&gt;
  &lt;?import java.util.*?&gt;
  &lt;?import javafx.scene.*?&gt;
  &lt;?import javafx.scene.control.*?&gt;
  &lt;?import javafx.scene.layout.*?&gt;
  
  &lt;BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fotofinish.FXMLDocumentController"&gt;
     &lt;top&gt;
        &lt;MenuBar BorderPane.alignment="CENTER"&gt;
          &lt;menus&gt;
            &lt;Menu mnemonicParsing="false" text="File"&gt;
              &lt;items&gt;
                    &lt;MenuItem fx:id="menubarFileNew" mnemonicParsing="false" onAction="#createNewFile" text="New"&gt;
                       &lt;accelerator&gt;
                          &lt;KeyCodeCombination alt="UP" code="N" control="DOWN" meta="UP" shift="UP" shortcut="UP" /&gt;
                       &lt;/accelerator&gt;
                    &lt;/MenuItem&gt;
                    &lt;SeparatorMenuItem mnemonicParsing="false" /&gt;
                    &lt;MenuItem fx:id="menubarFileOpen" mnemonicParsing="false" onAction="#openFile" text="Open"&gt;
                       &lt;accelerator&gt;
                          &lt;KeyCodeCombination alt="UP" code="O" control="DOWN" meta="UP" shift="UP" shortcut="UP" /&gt;
                       &lt;/accelerator&gt;
                    &lt;/MenuItem&gt;
                    &lt;Menu mnemonicParsing="false" text="Open from Gallery"&gt;
                      &lt;items&gt;
                        &lt;MenuItem fx:id="menubarFileGalleryButterfly" mnemonicParsing="false" onAction="#openFileGalleryButterfly" text="Butterfly" /&gt;
                          &lt;MenuItem fx:id="menubarFileGalleryTeddyBear" mnemonicParsing="false" onAction="#openFileGalleryTeddyBear" text="Teddy Bear" /&gt;
                          &lt;MenuItem fx:id="menubarFileGalleryPrincess" mnemonicParsing="false" onAction="#openFileGalleryPrincess" text="Princess" /&gt;
                          &lt;MenuItem fx:id="menubarFileGalleryFirefighter" mnemonicParsing="false" onAction="#openFileGalleryFirefighter" text="Firefighter" /&gt;
                      &lt;/items&gt;
                    &lt;/Menu&gt;
                    &lt;SeparatorMenuItem mnemonicParsing="false" /&gt;
                    &lt;MenuItem fx:id="menubarFileSave" mnemonicParsing="false" onAction="#saveFile" text="Save"&gt;
                       &lt;accelerator&gt;
                          &lt;KeyCodeCombination alt="UP" code="S" control="DOWN" meta="UP" shift="UP" shortcut="UP" /&gt;
                       &lt;/accelerator&gt;
                    &lt;/MenuItem&gt;
                    &lt;MenuItem fx:id="menubarFileSaveAs" mnemonicParsing="false" onAction="#saveFileAs" text="Save As"&gt;
                       &lt;accelerator&gt;
                          &lt;KeyCodeCombination alt="UP" code="S" control="DOWN" meta="UP" shift="DOWN" shortcut="UP" /&gt;
                       &lt;/accelerator&gt;
                    &lt;/MenuItem&gt;
                    &lt;SeparatorMenuItem mnemonicParsing="false" /&gt;
                &lt;MenuItem fx:id="menubarFileQuit" mnemonicParsing="false" onAction="#quit" text="Quit"&gt;
                       &lt;accelerator&gt;
                          &lt;KeyCodeCombination alt="UP" code="C" control="DOWN" meta="UP" shift="UP" shortcut="UP" /&gt;
                       &lt;/accelerator&gt;&lt;/MenuItem&gt;
              &lt;/items&gt;
            &lt;/Menu&gt;
            &lt;Menu mnemonicParsing="false" text="Help"&gt;
              &lt;items&gt;
                &lt;MenuItem fx:id="menubarHelpFotoFinishHelpMenuItem" mnemonicParsing="false" onAction="#displayHelpDoc" text="Foto Finish Help"&gt;
                       &lt;accelerator&gt;
                          &lt;KeyCodeCombination alt="UP" code="F1" control="UP" meta="UP" shift="UP" shortcut="UP" /&gt;
                       &lt;/accelerator&gt;&lt;/MenuItem&gt;
                    &lt;MenuItem fx:id="menubarHelpAboutMenuItem" mnemonicParsing="false" onAction="#displayAboutDialog" text="About" /&gt;
              &lt;/items&gt;
            &lt;/Menu&gt;
          &lt;/menus&gt;
        &lt;/MenuBar&gt;
     &lt;/top&gt;
     &lt;center&gt;
        &lt;SplitPane dividerPositions="0.14941569282136896" prefHeight="160.0" prefWidth="200.0" BorderPane.alignment="CENTER"&gt;
          &lt;items&gt;
            &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0"&gt;
                 &lt;children&gt;
                    &lt;VBox layoutX="-11.0" layoutY="25.0" prefHeight="200.0" prefWidth="100.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
                       &lt;children&gt;
                          &lt;Label fx:id="filtersLabel" text="Filters" /&gt;
                          &lt;Button fx:id="filterGrayscaleButton" mnemonicParsing="false" onAction="#applyFilterGrayscale" text="Grayscale" /&gt;
                          &lt;Button fx:id="filterSepiaButton" mnemonicParsing="false" onAction="#applyFilterSepia" text="Sepia" /&gt;
                          &lt;Button fx:id="filterInstantButton" mnemonicParsing="false" onAction="#applyFilterInstant" text="Instant" /&gt;
                          &lt;Button fx:id="filterCustomButton" mnemonicParsing="false" onAction="#createFilterCustomPopup" text="Custom" /&gt;
                          &lt;Button fx:id="filterNoneButton" mnemonicParsing="false" onAction="#applyFilterNone" text="None" /&gt;
                          &lt;Label fx:id="sliderLabel" text="Sliders" /&gt;
                          &lt;GridPane prefHeight="310.0" prefWidth="175.0"&gt;
                            &lt;columnConstraints&gt;
                              &lt;ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                              &lt;ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                            &lt;/columnConstraints&gt;
                            &lt;rowConstraints&gt;
                              &lt;RowConstraints maxHeight="88.0" minHeight="10.0" prefHeight="23.0" vgrow="SOMETIMES" /&gt;
                              &lt;RowConstraints maxHeight="290.0" minHeight="50.0" prefHeight="287.0" vgrow="SOMETIMES" /&gt;
                            &lt;/rowConstraints&gt;
                             &lt;children&gt;
                                &lt;Label fx:id="brightnessLabel" text="Brightness" /&gt;
                                &lt;Label fx:id="contrastLabel" text="Contrast" GridPane.columnIndex="1" /&gt;
                                &lt;Slider fx:id="brightnessSlider" min="-100.0" minorTickCount="5" orientation="VERTICAL" showTickLabels="true" showTickMarks="true" snapToTicks="true" GridPane.rowIndex="1" /&gt;
                                &lt;Slider fx:id="contrastSlider" min="-100.0" minorTickCount="5" orientation="VERTICAL" showTickLabels="true" showTickMarks="true" snapToTicks="true" GridPane.columnIndex="1" GridPane.rowIndex="1" /&gt;
                             &lt;/children&gt;
                          &lt;/GridPane&gt;
                          &lt;Label fx:id="drawingLabel" text="Drawing" /&gt;
                          &lt;ColorPicker fx:id="brushColorPicker" onAction="#changeBrushColor" /&gt;
                          &lt;Label fx:id="brushTypeLabel" text="Brush Type" /&gt;
                          &lt;RadioButton fx:id="brushTypeCircleRadioButton" mnemonicParsing="false" onAction="#changeBrushTypeCircle" selected="true" text="Circle"&gt;
                             &lt;toggleGroup&gt;
                                &lt;ToggleGroup fx:id="brushTypeRadioGroup" /&gt;
                             &lt;/toggleGroup&gt;
                          &lt;/RadioButton&gt;
                          &lt;RadioButton fx:id="brushTypeSquareRadioButton" mnemonicParsing="false" onAction="#changeBrushTypeSquare" text="Square" toggleGroup="$brushTypeRadioGroup" /&gt;
                          &lt;RadioButton fx:id="brushTypeSpraypaintRadioButton" mnemonicParsing="false" onAction="#changeBrushTypeSpraypaint" text="Spraypaint" toggleGroup="$brushTypeRadioGroup" /&gt;
                          &lt;Label fx:id="brushSizeLabel" text="Brush Size" /&gt;
                          &lt;TextField fx:id="brushSizeTextField" onAction="#adjustBrushSize" /&gt;
                       &lt;/children&gt;
                    &lt;/VBox&gt;
                 &lt;/children&gt;
              &lt;/AnchorPane&gt;
            &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="369.0" prefWidth="465.0"&gt;
                 &lt;children&gt;
                    &lt;ImageView fx:id="AnchorPaneScrollPaneImageView" fitHeight="479.0" fitWidth="585.0" pickOnBounds="true" preserveRatio="true"&gt;
                       &lt;image&gt;
                          &lt;Image url="@../../../../Pictures/images.png" /&gt;
                       &lt;/image&gt;
                    &lt;/ImageView&gt;
                 &lt;/children&gt;
              &lt;/AnchorPane&gt;
          &lt;/items&gt;
        &lt;/SplitPane&gt;
     &lt;/center&gt;
  &lt;/BorderPane&gt;
  `
  </code></pre>