Spring Boot+Thymeleaf图片上传成功后无法显示问题求助

以下是针对该问题的具体解决步骤：

1. 确认Model类的图片字段配置 #

确保图片字段用@Lob注解标记，类型为byte[]适配MySQL的BLOB类型，同时提供正确的getter/setter方法：

import jakarta.persistence.*;

@Entity
@Table(name = "images")
public class ImageEntity {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name = "image_name")
    private String imageName;
    
    @Lob
    @Column(name = "image_data", columnDefinition = "LONGBLOB")
    private byte[] imageData;

    // 省略构造方法、getter和setter
}

注：columnDefinition = "LONGBLOB"用于支持更大的图片文件，避免存储截断。

2. 添加图片获取接口（关键步骤） #

前端无法直接渲染数据库中的二进制数据，需在Controller中新增接口，将二进制数据转为图片流返回：

import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import java.io.IOException;

@RestController
public class ImageController {
    private final ImageDao imageDao;

    public ImageController(ImageDao imageDao) {
        this.imageDao = imageDao;
    }

    // 保留你现有的上传接口
    // ...

    // 新增图片获取接口
    @GetMapping("/image/{id}")
    public void getImage(@PathVariable Long id, HttpServletResponse response) throws IOException {
        ImageEntity image = imageDao.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("Invalid image ID: " + id));
        
        // 根据实际图片类型设置Content-Type，比如image/png、image/gif
        response.setContentType("image/jpeg");
        response.getOutputStream().write(image.getImageData());
        response.getOutputStream().flush();
    }
}

3. 修改Thymeleaf页面的img标签 #

将原来直接绑定二进制数据的img标签，改为调用图片获取接口：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Uploaded Images</title>
</head>
<body>
    <h1>Uploaded Images</h1>
    <div th:each="image : ${images}">
        <p th:text="${image.imageName}"></p>
        <img th:src="@{'/image/' + ${image.id}}" alt="Uploaded Image" width="200" />
    </div>
</body>
</html>

Thymeleaf会动态生成/image/{id}的URL，浏览器请求该URL时，Controller会返回对应的图片流，从而正常显示图片。

4. 验证数据库数据完整性 #

通过MySQL客户端查看images表的image_data字段，确认数据不为空且长度合理；也可以在Controller的获取接口中打印image.getImageData().length，检查字节数组长度是否符合图片实际大小。

5. 检查文件上传配置 #

在application.properties中配置合理的文件上传大小限制，避免图片上传时被截断：

# 单文件最大大小
spring.servlet.multipart.max-file-size=10MB
# 请求总大小
spring.servlet.multipart.max-request-size=10MB

6. 确认Dao层查询正确性 #

确保Dao接口的查询方法能完整获取包含imageData的实体，JPA继承的findById默认会加载所有字段，若使用自定义查询，需确保没有遗漏image_data字段：

import org.springframework.data.jpa.repository.JpaRepository;

public interface ImageDao extends JpaRepository<ImageEntity, Long> {
    // 无需额外方法，继承的findById即可满足需求
}

内容的提问来源于stack exchange，提问作者Ram Ranjeet Kumar