Spring框架下从PostgreSQL数据库在HTML中显示图片的方法

你的核心问题是：th:src="@{${item.imageTo_display}}" 直接绑定byte数组是错误的，<img>的src属性需要的是资源URL或者Base64编码的数据URI，而非原始字节数组。以下是两种可行的解决办法：

方案一：通过Controller接口返回图片流 #

适合较大图片，避免Base64编码导致的体积膨胀。

1. 新增Controller接口 #

在你的Controller中添加一个接口，根据Item的ID返回图片字节流：

@GetMapping("/item/image/{id}")
public ResponseEntity<byte[]> getItemImage(@PathVariable Integer id) {
    Item item = itemRepository.findById(id).orElseThrow(() -> new RuntimeException("Item不存在"));
    
    HttpHeaders headers = new HttpHeaders();
    // 根据实际图片类型调整MIME类型，比如IMAGE_PNG、IMAGE_GIF
    headers.setContentType(MediaType.IMAGE_JPEG);
    
    return new ResponseEntity<>(item.getImageTo_display(), headers, HttpStatus.OK);
}

2. 修改HTML的img标签 #

将src指向上述接口，传入Item的ID：

<td>
    <img class="s-ava-alone-img" width="150" height="150" th:src="@{/item/image/{id}(id=${item.id})}">
</td>

方案二：将byte数组转为Base64编码的Data URI #

适合小图片，无需额外接口，直接在前端渲染。

1. 在Item类中添加Base64转换方法 #

新增一个计算属性，将byte数组转为符合Data URI格式的字符串：

@Data
@Entity
@Table(name="Item")
public class Item {
    // 原有字段...

    // 该方法无需数据库映射，仅用于前端渲染
    public String getImageBase64() {
        if (imageTo_display == null) {
            return null;
        }
        // 根据图片实际类型调整前缀，比如image/png、image/gif
        return "data:image/jpeg;base64," + Base64.getEncoder().encodeToString(imageTo_display);
    }
}

2. 修改HTML的img标签 #

直接绑定转换后的Base64字符串：

<td>
    <img class="s-ava-alone-img" width="150" height="150" th:src="${item.imageBase64}">
</td>

额外提示 #

• 若图片存在多种类型，建议在Item实体中新增private String imageType字段存储MIME类型（如image/jpeg），这样两种方案都能动态匹配正确的类型，避免显示异常。
• 方案一中需确保Controller路径与HTML中的路径一致，注意Spring上下文路径的配置。

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