1. JavaFX Tutorial
2. JavaFX Overview
3. Your First JavaFX Application
4. JavaFX Stage
5. JavaFX Scene
6. JavaFX Node
7. JavaFX Properties
8. JavaFX FXML
9. JavaFX CSS Styling
10. JavaFX ImageView
11. JavaFX Text
12. JavaFX Fonts
13. JavaFX Hyperlink
14. JavaFX Label
15. JavaFX Button
16. JavaFX MenuButton
17. JavaFX SplitMenuButton
18. JavaFX ToggleButton
19. JavaFX RadioButton
20. JavaFX CheckBox
21. JavaFX ChoiceBox
22. JavaFX ComboBox
23. JavaFX ListView
24. JavaFX DatePicker
25. JavaFX ColorPicker
26. JavaFX TextField
27. JavaFX PasswordField
28. JavaFX Slider
29. JavaFX TextArea
30. JavaFX ToolBar
31. JavaFX Tooltip
32. JavaFX ProgressBar
33. JavaFX FileChooser
34. JavaFX DirectoryChooser
35. JavaFX Accordion
36. JavaFX TitledPane
37. JavaFX SplitPane
38. JavaFX TabPane
39. JavaFX ScrollPane
40. JavaFX Group
41. JavaFX Region
42. JavaFX Pane
43. JavaFX HBox
44. JavaFX VBox
45. JavaFX Separator
46. JavaFX FlowPane
47. JavaFX TilePane
48. JavaFX GridPane
49. JavaFX MenuBar
50. JavaFX ContexMenu
51. JavaFX WebView
52. JavaFX PieChart
53. JavaFX TableView
54. JavaFX TreeView
55. JavaFX TreeTableView
56. JavaFX HTMLEditor
57. JavaFX Pagination
58. JavaFX BarChart
59. JavaFX StackedBarChart
60. JavaFX ScatterChart
61. JavaFX LineChart
62. JavaFX AreaChart
63. JavaFX StackedAreaChart
64. JavaFX Color
65. JavaFX 2D
66. JavaFX Effects
67. JavaFX 3D
68. JavaFX Transformation
69. JavaFX Animation
70. JavaFX Media - JavaFX Video and Audio Support
71. JavaFX Canvas
72. JavaFX Drag and Drop
73. JavaFX Concurrency

• Creating an ImageView
• Adding an ImageView to the Scene Graph
• ImageView in Labels and Buttons

The JavaFX ImageView control can display an image inside a JavaFX GUI. The ImageView control must be added to the scene graph to be visible. The JavaFX ImageView control is represented by the class javafx.scene.image.ImageView .

Creating an ImageView

You create an ImageView control instance by creating an instance of the ImageView class. The constructor of the ImageView class needs an instance of a javafx.scene.image.Image as parameter. The Image object represents the image to be displayed by the ImageView control.

Here is a JavaFX ImageView instantiation example:

FileInputStream input = new FileInputStream("resources/images/iconmonstr-home-6-48.png");
Image image = new Image(input);
ImageView imageView = new ImageView(image);

First a FileInputStream is created which points to the image file of the image to display.

Second an Image instance is created, passing the FileInputStream as parameter to the Image constructor. This way the Image class knows where to load the image file from.

Third an ImageView instance is created, passing the Image instance as parameter to the ImageView constructor.

Adding an ImageView to the Scene Graph

To make the ImageViewl visible you must add it to the scene graph. This means adding it to a Scene object. Since ImageView is not a subclass of javafx.scene.Parent it cannot be added directly to the scene grahp. It must be nested inside another component, for instance a layout component.

Here is an example that attaches a JavaFX ImageView to the scene graph by nesting it inside a HBox layout component:

package com.jenkov.javafx.controls;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

import java.io.FileInputStream;

public class ImageViewExperiments extends Application  {


    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("ImageView Experiment 1");

        FileInputStream input = new FileInputStream("resources/images/iconmonstr-home-6-48.png");
        Image image = new Image(input);
        ImageView imageView = new ImageView(image);

        HBox hbox = new HBox(imageView);

        Scene scene = new Scene(hbox, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}

The result of running the above JavaFX ImageView example is an application that looks like this:

ImageView in Labels and Buttons

It is possible to use an ImageView in both a JavaFX Label and Button. This will cause the Label and Button to display the ImageView to the left of the text in the Label or Button. See the texts about JavaFX Label and JavaFX Button for information about how to do that.