JavaFX如何将数据库读取的byte类型图片显示到TableView的ImageView列

问题核心原因 #

你当前代码首先存在类型不匹配的问题：TableView的泛型是Product，但图片列pictureColumn的泛型是ProductTableColumnModel，两者类型不统一，数据绑定逻辑本身就无法生效，需要先调整结构再补全代码。

完整修复步骤 #

1. 补全ProductTableColumnModel辅助类的字段 #

辅助类需要同时承载文本展示字段和图片控件，修改后代码如下：

public class ProductTableColumnModel {
    // 补充文本展示需要的字段
    private String productName;
    private String description;
    private ImageView picture;

    // 补充对应get/set方法
    public String getProductName() {
        return productName;
    }
    public void setProductName(String productName) {
        this.productName = productName;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public ImageView getPicture() {
        return this.picture;
    }
    public void setPicture(ImageView picture) {
        this.picture = picture;
    }
}

2. 修正控制器的泛型声明 #

修改FXML注入的TableView和所有列的泛型，统一绑定到ProductTableColumnModel：

@FXML
TableView <ProductTableColumnModel> table_Products;
@FXML
TableColumn <ProductTableColumnModel, String> productName;
@FXML
TableColumn <ProductTableColumnModel, String> descColumn;
@FXML
TableColumn <ProductTableColumnModel, ImageView> pictureColumn;

3. 补全if分支的代码，同时调整数据填充逻辑 #

原来的tableData存储类型也要同步改成ProductTableColumnModel，缺失的代码段如下：

// 先修正tableData的泛型声明，类成员变量定义如下：
private ObservableList<ProductTableColumnModel> tableData;

// 填充数据的循环修改为：
for(Product  p : getProducts() ) {
    // 直接构造视图层用的辅助类对象
    ProductTableColumnModel viewItem = new ProductTableColumnModel();
    viewItem.setProductName(String.valueOf(p.getProductName()));
    viewItem.setDescription(String.valueOf(p.getDescription()));
    byte[] pictureImageInByte = p.getPicture(); 
    if(pictureImageInByte != null) {
        ByteArrayInputStream imageDate = new ByteArrayInputStream(pictureImageInByte);
        Image image = new Image(imageDate);
        // ----- 以下为缺失的补全代码 -----
        // 构造ImageView并设置参数，可自行调整宽高适配列宽
        ImageView pictureView = new ImageView(image);
        pictureView.setFitWidth(80);
        pictureView.setFitHeight(80);
        pictureView.setPreserveRatio(true);
        // 赋值给视图辅助类对象
        viewItem.setPicture(pictureView);
        // ----- 补全代码结束 -----
    }
    tableData.addAll(viewItem);
}
table_Products.setItems(tableData);

4. 确认列初始化方法的配置正确 #

原来的列值工厂配置可以直接复用：

private void intializeTableColumns() {
    tableData = FXCollections.observableArrayList();
    productName.setCellValueFactory(new PropertyValueFactory<ProductTableColumnModel, String>("productName"));
    descColumn.setCellValueFactory(new PropertyValueFactory<ProductTableColumnModel, String>("description"));
    pictureColumn.setCellValueFactory(new PropertyValueFactory<ProductTableColumnModel, ImageView>("picture"));
}

内容的提问来源于stack exchange，提问作者Nacira