Image not Loading from the Database to the ImageView with JavaFx & Scene Builder

Question

Here is my TodaysMenu Model Class.

package hbh.helabojunhala.Model.Dashboard;

import hbh.helabojunhala.DatabaseConnection.DatabaseConnection;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import java.util.ArrayList;
import java.util.List;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class TodaysMenuModel {

private Connection connection;

public TodaysMenuModel() {
    connection = DatabaseConnection.getConnection();
}

public List<String> getItemCodes() {
    List<String> itemCodes = new ArrayList<>();

    try {
        PreparedStatement preparedStatement = connection.prepareStatement("SELECT itemCode FROM items");
        ResultSet resultSet = preparedStatement.executeQuery();

        while (resultSet.next()) {
            itemCodes.add(resultSet.getString(1));
        }

        preparedStatement.close();
    } catch (SQLException e) {
        System.out.println(e.getMessage());
    }

    return itemCodes;
}

public void getItemDetails(String itemCode, ImageView imageBox, TextField itemNameTxt) {
    try {
        PreparedStatement preparedStatement = connection.prepareStatement("SELECT itemName, itemImage FROM items WHERE itemCode = ?");
        preparedStatement.setString(1, itemCode);
        ResultSet resultSet = preparedStatement.executeQuery();

        if (resultSet.next()) {
            itemNameTxt.setText(resultSet.getString(1));
            Image image = new Image(resultSet.getBinaryStream(2));
            imageBox.setImage(image);
        }

        preparedStatement.close();
    } catch (SQLException e) {
        System.out.println(e.getMessage());
    }
}

And this is my TodaysMenuController Controller Class

package hbh.helabojunhala.Controller.Dashboard;


import hbh.helabojunhala.Model.Dashboard.TodaysMenuModel;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.TextField;
import javafx.scene.image.ImageView;

import java.net.URL;
import java.util.List;
import java.util.ResourceBundle;

public class TodaysMenuController implements Initializable {

    @FXML
    private ComboBox<String> itemCodeCombo;
    @FXML
    private TextField itemNameTxt;
    @FXML
    private ImageView imageBox;

    private TodaysMenuModel model;

    public TodaysMenuController() {
        model = new TodaysMenuModel();
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        List<String> itemCodes = model.getItemCodes();
        itemCodeCombo.getItems().addAll(itemCodes.toArray(new String[0]));
    }

    @FXML
    public void itemCodeComboOnAction() {
        String selectedItemCode = itemCodeCombo.getValue();
        model.getItemDetails(selectedItemCode, imageBox, itemNameTxt);
    }
}

I want to load the image from the database to the ImageView in my application. When I'm selecting the item in ComboBox, The Data shows up in fields But does not load the Image. And there is no showing any error.

Also in my database table, I'm using datatype as "longblob" to store the image. The image is stored in the table. Also, another thing when I'm trying to download an image from the database it's downloading as .bin file

Can Anyone help me to solve that problem? Appreciate it. Thank you.

Additional

Here is the way I have stored the Image t the Database Table.

private static byte[] imageToBytes(Image image) {
        if (image == null) {
            return null;
        }

        // Convert Image to WritableImage
        PixelReader pixelReader = image.getPixelReader();
        if (pixelReader == null) {
            System.err.println("Failed to get PixelReader from the image.");
            return null;
        }

        int width = (int) image.getWidth();
        int height = (int) image.getHeight();

        try {
            WritableImage writableImage = new WritableImage(pixelReader, width, height);

            // Get pixel data from WritableImage
            byte[] buffer = new byte[width * height * 4]; // Assuming the image is in ARGB format (4 bytes per pixel)
            ByteBuffer byteBuffer = ByteBuffer.wrap(buffer);

            for (int y = 0; y < height; y++) {
                for (int x = 0; x < width; x++) {
                    int pixel = writableImage.getPixelReader().getArgb(x, y);
                    byteBuffer.putInt(pixel);
                }
            }

            // Assuming 'maxSize' is the maximum allowed size for the 'itemImage' column
            int maxSize = 1024000; // Adjust this value based on your database configuration

            int actualSize = Math.min(byteBuffer.position(), maxSize);

            byte[] resizedBuffer = Arrays.copyOf(buffer, actualSize);
            return resizedBuffer;
        } catch (Exception e) {
            // Handle exceptions during image conversion
            System.err.println("Error converting image to byte array: " + e.getMessage());
            e.printStackTrace();
            return null;
        }
    }

Answer 1

If your image is not loading from the database to the ImageView in JavaFX using Scene Builder, there are a few things you can check:

Database Retrieval: Ensure that you are retrieving the image correctly from the database. Check your database retrieval code to make sure you're getting the image data as expected.

Image Format: Verify that the image format is supported by JavaFX. Common formats like PNG, JPG, and GIF are generally supported.

Correct Data Binding: Confirm that you are binding the retrieved image data to the ImageView correctly. Check your code to make sure the Image object is created and set on the ImageView appropriately.

UI Update on the JavaFX Application Thread: Ensure that any UI updates, including setting the image on the ImageView, are performed on the JavaFX Application Thread. You can use Platform.runLater() for this if needed.

Correct Image Path or Stream: If you are using the Image class to load the image, make sure that you are providing the correct path or input stream. If the image is stored as a byte array, use ByteArrayInputStream to create the Image.

Size and Visibility: Check if the ImageView has the appropriate size and visibility settings. It should be large enough to display the image, and its visibility should be set to true.

Error Handling: Implement error handling to catch any exceptions that might occur during image loading. This can help you identify the specific issue.

Debugging: Use debugging tools to inspect the values during runtime. This can help you identify where the issue is occurring.

If you provide more details or code snippets, I can offer more specific assistance