The Image and ImageView Classes
Tags: java, programming, learning, beginners
Published: 2024-06-20 16:46:52

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jjg41t300zay6lx0pow.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4rpi2cbrfowp4b61fcc.png)


```
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);
	}
}

```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/objmjn3dhmmbzmaxumtk.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px0kfgtf2v9s2o4gzua5.png)

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");`