ImageView

ImageView is used to display an image in JavaFX. You can show icons, photos, logos, or even change the image while the program is running.

Example: Show and change an image

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="15"
      alignment="CENTER"
      xmlns="http://javafx.com/javafx/17"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="org.example.demo.HelloController">

    <Label text="Current picture:"/>

    <ImageView fx:id="imageView"
               fitWidth="250"
               fitHeight="180"
               preserveRatio="true"/>

    <Button text="Show Cat"
            onAction="#showCat"/>

    <Button text="Show Dog"
            onAction="#showDog"/>

    <Button text="Clear Image"
            onAction="#clearImage"/>

    <Label fx:id="statusLabel"
           text="No image loaded."/>

</VBox>

Controller

package org.example.demo;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

public class HelloController {

    @FXML
    private ImageView imageView;

    @FXML
    private Label statusLabel;

    private Image catImage;
    private Image dogImage;

    @FXML
    private void initialize() {

        catImage = new Image(
                getClass().getResource("/images/cat.png").toExternalForm()
        );

        dogImage = new Image(
                getClass().getResource("/images/dog.png").toExternalForm()
        );

        imageView.setImage(catImage);
        statusLabel.setText("Cat image loaded when the program started.");
    }

    @FXML
    private void showCat() {
        imageView.setImage(catImage);
        statusLabel.setText("Showing the cat image.");
    }

    @FXML
    private void showDog() {
        imageView.setImage(dogImage);
        statusLabel.setText("Showing the dog image.");
    }

    @FXML
    private void clearImage() {
        imageView.setImage(null);
        statusLabel.setText("Image removed.");
    }
}

Project structure

Your images should be inside src/main/resources/images/

Example:

src
└── main
    └── resources
        └── images
            ├── cat.png
            └── dog.png

What happens?

When the application starts:

imageView.setImage(catImage);

The cat image appears.

When the user clicks "Show Dog":

imageView.setImage(dogImage);

The dog image replaces the cat image.

When the user clicks "Clear Image":

imageView.setImage(null);

The image disappears.

Example with image size and position

<ImageView fx:id="imageView"
           fitWidth="300"
           fitHeight="200"
           preserveRatio="true"
           smooth="true"
           pickOnBounds="true"/>

Meaning:

• fitWidth="300" → maximum width is 300
• fitHeight="200" → maximum height is 200
• preserveRatio="true" → keep original proportions
• smooth="true" → better quality when resized
• pickOnBounds="true" → easier to click the image

Example: detect click on the image

<ImageView fx:id="imageView"
           onMouseClicked="#imageClicked"
           fitWidth="250"
           fitHeight="180"/>

@FXML
private void imageClicked() {
    statusLabel.setText("You clicked the image!");
}

Important methods

imageView.setImage(image);     // Show an image
imageView.getImage();          // Get current image
imageView.setFitWidth(300);    // Change width
imageView.setFitHeight(200);   // Change height
imageView.setVisible(false);   // Hide image