The Image and ImageView Classes

The Image class represents a graphical image and the ImageView class can be used to display an image. The javafx.scene.image.Image class represents a graphical image and is used for loading an image from a specified filename or a URL. For example, new Image("image/us.gif") creates an Image object for the image file us.gif under the directory image in the Java class directory and new Image("http://www.cs.armstrong.edu/liang/image/us.gif") creates an Image object for the image file in the URL on the Web.

The javafx.scene.image.ImageView is a node for displaying an image. An ImageView can be created from an Image object. For example, the following code creates an ImageView from an image file:

Image image = new Image("image/us.gif");
ImageView imageView = new ImageView(image);

Alternatively, you can create an ImageView directly from a file or a URL as follows:

ImageView imageView = new ImageView("image/us.gif");

The UML diagrams for the Image and ImageView classes are illustrated in Figures below.

package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.geometry.Insets;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;


public class ShowImage extends Application {
    @Override // Override the start method in the Application class
    public void start(Stage primaryStage) {
        // Create a pane to hold the circle
        Pane pane = new HBox(10);
        pane.setPadding(new Insets(5, 5, 5, 5));
        Image image = new Image("file:/C:/Users/Paul/development/MyJavaFX/src/application/image/ke.jpg");
        pane.getChildren().add(new ImageView(image));

        ImageView imageView2 = new ImageView(image);
        imageView2.setFitHeight(100);
        imageView2.setFitWidth(100);
        pane.getChildren().add(imageView2);

        ImageView imageView3 = new ImageView(image);
        imageView3.setRotate(90);
        pane.getChildren().add(imageView3);

        // Create a scene and place it in the stage
        Scene scene = new Scene(pane);
        primaryStage.setTitle("ShowImage"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show(); // Display the stage
    }

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

The program creates an HBox (line 16). An HBox is a pane that places all nodes horizontally in one row. The program creates an Image, and then an ImageView for displaying the image, and places the ImageView in the HBox (line 19).

The program creates the second ImageView (line 21), sets its fitHeight and fitWidth properties (lines 22–23) and places the ImageView into the HBox (line 24). The program creates the third ImageView (line 26), rotates it 90 degrees (line 27), and places it into the HBox (line 28). The setRotate method is defined in the Node class and can be used for any node. Note that an Image object can be shared by multiple nodes. In this case, it is shared by three ImageView. However, a node such as ImageView cannot be shared. You cannot place an ImageView multiple times into a pane or scene.

Note that you must place the image file in the same directory as the class file, as shown in the following figure.

If you use the URL to locate the image file, the URL protocal http:// must be present. So the following code is wrong.

new Image("www.cs.armstrong.edu/liang/image/us.gif");

It must be replaced by

new Image("http://www.cs.armstrong.edu/liang/image/us.gif");