前言

有时候图片会使用 Base64 编码来处理，然后再传到前端 img 标签的 src 属性里展示，这里记录遇到的一个问题，就是使用谷歌邮箱来打开图片，使用了 Base64 编码处理的图片是展示不出来的，不是找不到，是直接 src 属性都会不见了（可以在浏览器上按F12打开控制台查看），经过多次测试发现，谷歌邮箱似乎对 “data:image/jpg;base64,” 这串 Base64 编码处理的编码头有意见，只要带有这个编码头文件，src 属性直接诡异失踪，img 图片不展示。但是使用 Base64 编码处理，要在 src 属性里面展示图片，这个编码头文件又是必须要带入的，不带入依然无法展示图片；而国内大部分邮箱是没有这个问题的，都是可以正常展示的，所以怀疑估计是谷歌邮箱不兼容这种编码方式吧。

解决方法：

后台取到 Base64 编码的文件后，直接在后台处理成流文件，再写给前端浏览器展示，即可避开在谷歌邮箱里面直接读取 Base64 编码不兼容的问题。

代码：

注意：谷歌邮箱要求比较严格，路径必须用 “https” 开头才行，同时本地 localhost 是测试不了的（自己是这种情况，必须部署到公司服务器上才能正常展示），国内的邮箱使用 “http” 或者 “https” 都可以。

前端 <img src="url"/> 中的 url 写法：

<img src="https:xxx.xxx.com/demo/ec/findS4Photo?id=xxxxxxxx"/>

前端请求方法：

 1 @RequestMapping(value = "ec/findS4Photo", method = RequestMethod.GET)
 2 public void findS4Photo(HttpSession session, HttpServletRequest request, HttpServletResponse response) {
 3     log.info("==进来处理图片了==");
 4      
 5     // ec/fs4?id=5b9f6a1b5a83c1377c32b058
 6     try {
 7         String id= request.getParameter("id");
 8          
 9         if (StringUtils.isNotBlank(id)) {
10 　　　　　　　　
11             //根据id取到Base64编码（自己 Base64 处理的编码存在数据库，所以从数据库中取，自己的存在哪里就从哪里取）　　　　　　　　　　　
12             String base64Code = qrcodeService.getQrcodeBase64PhotoById(qrcodeId);
13  
14             try {
15                 response.setContentType("image/*"); // 设置返回的文件类型
16                 OutputStream toClient = response.getOutputStream();
17                 generateImage(base64Code, toClient);// 核心处理方法
18             } catch (Exception ex) {
19                 System.out.println(ex.toString());
20             }
21  
22         }
23     } catch (Exception e) {
24         e.printStackTrace();
25     }
26     log.info("==结束处理图片了==");
27 }

处理方法：

 1 public static boolean generateImage(String base64Code, OutputStream out) {
 2  
 3     // 图像数据为空
 4         if (base64Code == null || "".equals(base64Code)){
 5                 return false;
 6         }
 7     BASE64Decoder decoder = new BASE64Decoder();
 8     try {
 9         // Base64解码
10         byte[] b = decoder.decodeBuffer(base64Code);
11         for (int i = 0; i < b.length; ++i) {
12             if (b[i] < 0) {// 调整异常数据
13                 b[i] += 256;
14             }
15         }
16         // OutputStream out = new FileOutputStream(imgFilePath);
17         out.write(b);
18         out.flush();
19         out.close();
20         return true;
21     } catch (Exception e) {
22         return false;
23     }
24 }

 最后稍微提一下：前端 url 路径由于直接访问后台，可以做一下加密处理，包括传的参数 id 。如果有需要的话。