How can I show an image using the ImageView component in javafx and fxml

Question

I suppose it s a very simple thing but I just can t get behind it  All I want is to show an image over an ImageView linked to fxml  Here is my code   package application   import java io File   import javafx application Application  import javafx stage Stage  import javafx scene Scene  import javafx scene image Image  import javafx scene image ImageView  import javafx scene layout AnchorPane  import javafx fxml FXML  import javafx fxml FXMLLoader    public class Main extends Application        FXML     private ImageView imageView        Override     public void start Stage primaryStage                 try                    AnchorPane root    AnchorPane FXMLLoader load getClass   getResource  Sample fxml             Scene scene   new Scene root 400 400           scene getStylesheets   add getClass   getResource  application css   toExternalForm             primaryStage setTitle  Hello World             File file   new File  src Box13 jpg            Image image   new Image file toURI   toString             imageView   new ImageView image              root getChildren   add imageView           primaryStage setScene scene           primaryStage show          catch Exception e            e printStackTrace             public static void main String   args        launch args         And my fxml file   lt  xml version  1 0  encoding  UTF-8   gt    lt  import java lang    gt   lt  import javafx scene image    gt   lt  import javafx scene layout    gt   lt  import javafx scene layout AnchorPane  gt    lt AnchorPane prefHeight  316 0  prefWidth  321 0  xmlns fx  http   javafx com fxml 1      xmlns  http   javafx com javafx 2 2  fx controller  application SampleController  gt     lt children gt       lt ImageView fx id  imageView  fitHeight  150 0  fitWidth  200 0  layoutX  61 0  layoutY  83 0  pickOnBounds  true  preserveRatio  true   gt        lt  ImageView gt     lt  children gt   lt  AnchorPane gt    There should be no problem with the file linking as it works fine when I include the outcommented line  This would be the way it s done in java only but I want to use fxml here as I am using fxml for all other components but it just doesn t work for the ImageView and I don t know why  I have also tried to create a new controller class and link the ImageView there but that neither works  Can anyone help me   Thanks

User · Answer

The Code part        Image imProfile   new Image getClass   getResourceAsStream   img profile128 png      ImageView profileImage new ImageView imProfile     in a javafx maven

User · Answer

Please find below example to load image using JavaFX       import javafx application Application      import javafx scene Scene      import javafx scene image Image      import javafx scene image ImageView      import javafx scene layout StackPane      import javafx stage Stage       public class LoadImage extends Application        public static void main String   args        Application launch args              Override     public void start Stage primaryStage        primaryStage setTitle  Load Image         StackPane sp   new StackPane        Image img   new Image  javafx jpg        ImageView imgView   new ImageView img       sp getChildren   add imgView          Adding HBox to the scene     Scene scene   new Scene sp       primaryStage setScene scene       primaryStage show                 Create one source folder with name Image in your project and add your image to that folder otherwise you can directly load image from external URL like following   Image img   new Image  http   mikecann co uk wp-content uploads 2009 12 javafx logo color 1 jpg

User · Answer

FXML ImageView image    Override public void initialize URL url  ResourceBundle rb      image setImage new Image    about jpg

User · Answer

It s recommended to put the image to the resources  than you can use it like this   imageView   new ImageView   gui img img jpg

User · Answer

If you want to use FXML  you should separate the controller  like you were doing with the SampleController   Then your fx controller in your FXML should point to that   Probably you are missing the initialize method in your controller  which is part of the Initializable interface  This method is called after the FXML is loaded  so I recommend you to set your image there   Your SampleController class must be something like this   public class SampleController implements Initializable         FXML     private ImageView imageView        Override     public void initialize URL location  ResourceBundle resources            File file   new File  src Box13 jpg            Image image   new Image file toURI   toString             imageView setImage image             I tested here and it s working

User · Answer

You don t need an initializer  unless you re dynamically loading a different image each time  I think doing as much as possible in fxml is more organized  Here is an fxml file that will do what you need    lt  xml version  1 0  encoding  UTF-8   gt    lt  import java lang    gt   lt  import javafx scene image    gt   lt  import javafx scene layout    gt    lt AnchorPane     xmlns fx  http   javafx co fxml 1      xmlns  http   javafx com javafx 2 2      fx controller  application SampleController      prefHeight  316 0      prefWidth  321 0       gt       lt children gt           lt ImageView                 fx id  imageView                  fitHeight  150 0                  fitWidth  200 0                  layoutX  61 0                  layoutY  83 0                  pickOnBounds  true                  preserveRatio  true               gt               lt image gt                   lt Image                     url  src Box13 jpg                      backgroundLoading  true                        gt               lt  image gt           lt  ImageView gt       lt  children gt   lt  AnchorPane gt    Specifying the backgroundLoading property in the Image tag is optional  it defaults to false  It s best to set backgroundLoading true when it takes a moment or longer to load the image  that way a placeholder will be used until the image loads  and the program wont freeze while loading

User · Answer

src sample images shopp png         Parent root  new StackPane        ImageView imageView new ImageView new Image getClass   getResourceAsStream  images shopp png            StackPane  root  getChildren   add imageView

[java] How can I show an image using the ImageView component in javafx and fxml?

Examples related to java

Examples related to imageview

Examples related to fxml