🏆本文收录于「Bug调优」专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

问题描述

SpringBoot整合Mybatis实现从数据库中读取blob属性的图片在html页面中无法显示并且出现乱码
实体类

private byte[] img;public byte[] getImg() {return img;}public void setImg(byte[] img) {this.img = img;}

mapper类

@Select("select img from album ")
byte[] getImageData();

Controller层

@Autowiredprivate AlbumMapper albumMapper;@GetMapping("/allalbum")public ResponseEntity<byte[]> getImage(){byte[] imageData=albumMapper.getImageData();HttpHeaders headers=new HttpHeaders();headers.setContentType(MediaType.IMAGE_JPEG);return new ResponseEntity<>(imageData,headers, HttpStatus.OK);}

html页面

<img th:src="@{/allalbum}"/>

如上问题有来自我自身项目开发，有的收集网站，有的来自读者，如有侵权，立马删除。

解决方案

  如下是上述问题的解决方案，仅供参考：

---

  在Spring Boot项目中，从数据库读取BLOB类型的图片并在HTML页面中显示时，出现乱码和无法显示的问题通常是由于响应的内容类型不正确或者图片数据未被正确处理导致的。以下是一些可能的解决方案：

1. 设置正确的Content-Type：
   确保返回的图片数据的Content-Type是正确的。例如，如果图片是JPEG格式，应该设置为image/jpeg。

2. 使用ResponseEntity：
   您已经使用了ResponseEntity，这是正确的做法，因为它允许您自定义响应的头部信息。

3. 检查图片数据：
   确保从数据库中读取的图片数据是完整的，没有被截断或损坏。

4. 使用Base64编码：
   考虑将图片的字节数据编码为Base64字符串，然后在HTML中使用数据URI来显示图片。

5. 配置Spring Boot的Multipart Resolver：
   如果您使用的是Spring Boot 2.x版本，可能需要添加一个multipart resolver的配置，以确保BLOB数据被正确读取。

6. 检查Spring MVC配置：
   确保Spring MVC的配置没有干扰到图片数据的传输。

7. 检查Thymeleaf模板引擎的配置：
   如果您使用的是Thymeleaf作为模板引擎，确保相关的配置没有问题。

8. 使用正确的HTML标签：
   确认HTML中的<img>标签使用正确，并且th:src属性正确地引用了控制器方法。

9. 检查浏览器控制台：
   查看浏览器的开发者工具中的网络请求，确认请求是否成功，以及响应头部是否正确。

10. 使用Postman测试接口：
    使用Postman等工具测试您的图片获取接口，确认返回的确实是图片数据。

11. 检查Spring Boot的版本：
    如果您使用的是Spring Boot 2.x，可能需要添加spring.servlet.multipart.enabled属性到application.properties文件中，并设置为true。

12. 检查MyBatis的配置：
    确认MyBatis配置正确，能够正确处理BLOB类型的数据。

以下是一些代码示例，展示如何改进您的现有代码：

Controller层：

@GetMapping("/allalbum")
public ResponseEntity<byte[]> getImage() {byte[] imageData = albumMapper.getImageData();HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.IMAGE_JPEG);headers.setContentLength(imageData.length);return new ResponseEntity<>(imageData, headers, HttpStatus.OK);
}

HTML页面：

<img th:src="@{/allalbum}" alt="Album Image" />

application.properties（如果需要）：

# Spring Boot 2.x 需要的配置
spring.servlet.multipart.enabled=true

  如果上述步骤仍然无法解决问题，请提供更多的信息，例如浏览器控制台的错误信息、网络请求的详细信息，或者数据库中BLOB字段的具体内容，以便进一步诊断问题。

  希望能够帮到有需要的你。

  PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。

  若有对当前Bug有与如下提供的方法不一致，有个不情之请，希望你能把你的新思路或新方法分享到评论区，一起学习，目的就是帮助更多所需要的同学，正所谓「赠人玫瑰，手留余香」。

☀️写在最后

  ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。

码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个一键三连(关注、点赞、收藏) ，您的支持就是我坚持写作分享知识点传播技术的最大动力。

同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有！

📣关于我

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云2023年度十佳博主，掘金多年度人气作者Top40，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 20w+；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

---