FreeCode

Donate HTML/CSS JavaFX Java Home
JavaFX Starter Template JavaFX Labels JavaFX Buttons JavaFX Toggle Buttons JavaFX Radio Buttons and Toggle Groups JavaFX Checkboxes JavaFX Choice Boxes JavaFX Combo Boxes JavaFX Text Areas JavaFX Text Fields JavaFX List Views JavaFX Image Views JavaFX Color Pickers JavaFX Date Pickers JavaFX Resizable Split Pane Layouts JavaFX VBox (Vertical Box Layouts) JavaFX HBox (Horizontal Box Layouts) JavaFX Flow Pane Layouts JavaFX Tile Pane Layouts JavaFX Web Views

JavaFX Image Views

Code Description:

The code below shows how to take an image object and place it in an Image View so it can be displayed on the user interface. If you would like to download our beautiful sample image, it is provided here:

Download - people.png

If using the provided code, ensure the image is saved in the "src" folder as shown below:

Adding an Image into the src Folder

Image View Syntax:

Image image = new Image("people.png");
		
ImageView imageView = new ImageView();
imageView.setImage(image);

Runnable JavaFX Image View Example Code:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Demo extends Application {

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

    @Override
    public void start(Stage primaryStage) throws Exception {
		
	VBox root = new VBox();
		
        Image image = new Image("people.png");
		
	ImageView imageView = new ImageView();
	imageView.setImage(image);
	imageView.setPreserveRatio(true);
	imageView.setFitWidth(200);
	imageView.setCache(true);
	imageView.setSmooth(true);
		
	root.getChildren().add(imageView);

	primaryStage.setTitle("Image View Demo");
	primaryStage.setScene(new Scene(root, 200, 200));
	primaryStage.show();
		
    }

}

How to Run This Code:

Make sure that your Class name is the same as ours. In this case, we are using the Class name of "Demo". Alternatively, you can change the Class name in the provided code to match yours.

Note: You will NOT be able to copy and paste this code into your IDE unless you first set up JavaFX for your project. Check out this link if you need help setting up JavaFX:

JavaFX Comprehensive Setup Guide

Output:

JavaFX Image View Application Output Image

Important Methods:

  • setImage() - Used to set the image for the image view.
  • setPreserveRatio() - Sets the image to preserve the original aspect ratio. If the width is scaled, the height would scale with it.
  • setFitWidth() - Used to set the width of the image.
  • setFitHeight() - Used to set the height of the image.
  • setCache() - Caches the image in the system allowing for better performance.
  • setSmooth() - Allows for a better quality image if set to true. Setting to true will be slightly slower with regards to performance.
  • setVisible() - Show or hide an image view from the scene. EX: "imageView.setVisible(false);"

Related Links:

JavaFX Web Views JavaFX List Views