[FIXED] Uploading and displaing an image using JavaFX

Issue

I'm working with JavaFX, where I have written a code that contains display Image, through I want to display the image on my scene, but it's not working. The image doesn't display.
When I'm using the getAbsolutePath() it also displays an error. Although 70% of my coding is done, I'm just stuck with displaying images on the scene (without uploading it).
Here is the code I'm working with:

package application;
    
import java.util.HashMap;

import java.io.File;

import javafx.application.Application;
import javafx.stage.Stage; 
import javafx.stage.FileChooser;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.shape.Circle;
import javafx.scene.control.Button;
import javafx.scene.control.Label;


public class Main extends Application {
    
    public ImageView iv;
    private GridPane gridpane;
 
    
//Image
    Image img = new Image("application/PA_Image.jpg");
    


    
    @Override
    public void start(Stage primaryStage) {
        try {
            

//Upload Image Button
            final Button button  = new Button("Display Image");  
            
//FileChooser
            final FileChooser fileChooser = new FileChooser();


            button.setOnAction(e -> {
                File selectedFile  = fileChooser.showOpenDialog(primaryStage);
                 if (selectedFile != null) { 
                     System.out.println(selectedFile.getAbsolutePath());
                      
                     Image image = new Image(selectedFile.getAbsolutePath()); 
                     iv = new ImageView(image);
                     
                     //Image uploadedImage = new Image(selectedFile.getAbsolutePath());
                     
                 }
            });
            
            final StackPane stac = new StackPane();
            stac.getChildren().add(button);

            Scene scene = new Scene(stac,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
            
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

So, what I need, is to display images on my scene by clicking the button and selecting an image.

Solution

The Image() constructor expects a URI and not an Absolute path. There are two ways to approach this.

1. Turn your absolutePath in a URI by adding the required prefix file://

2. Use InputStream which holds the Image data and you don't have to care about the Path after it has been created. I like this way better.

Example:

button.setOnAction(e -> {
    File selectedFile  = fileChooser.showOpenDialog(primaryStage);
    if (selectedFile != null) {
        System.out.println(selectedFile.getAbsolutePath());

        final InputStream targetStream; // Creating the InputStream
        try
        {
            targetStream = new DataInputStream(new FileInputStream(selectedFile));
            Image image = new Image(targetStream);
            iv = new ImageView(image);

        } catch (FileNotFoundException fileNotFoundException)
        {
            fileNotFoundException.printStackTrace();
        }


    }
});

There are also some other problems with your code.

1. Create your ImageView and initialize it. Not when the button is clicked but right at the beginning
2. Add the ImageView to your Scene
3. Do not create new ImageView every time the button is clicked, just change the Image.

This is my code based on yours:

public ImageView iv = new ImageView();
private GridPane gridpane;

@Override
public void start(Stage primaryStage) {
try {


    //Upload Image Button
    final Button button = new Button("Display Image");

    //FileChooser
    final FileChooser fileChooser = new FileChooser();


    button.setOnAction(e -> {
        File selectedFile = fileChooser.showOpenDialog(primaryStage);
        if (selectedFile != null) {

            final InputStream targetStream;
            try {
                targetStream = new DataInputStream(new FileInputStream(selectedFile));
                Image image = new Image(targetStream);
                iv.setImage(image); // Set Image

            } catch (FileNotFoundException fileNotFoundException) {
                fileNotFoundException.printStackTrace();
            }


        }
    });

    final StackPane stac = new StackPane();
    stac.getChildren().add(button);
    stac.getChildren().add(iv); // Add ImageView

    Scene scene = new Scene(stac, 1600, 800);
    //scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();

} catch (Exception e) {
    e.printStackTrace();
}
}

Answered By - Renis1235
Answer Checked By - Marie Seifert (JavaFixing Admin)