谷歌郵箱無法顯示使用 Base64 處理的圖片的解決方法

有時候圖片會使用 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"/>

前端請求方法：

@RequestMapping(value = "ec/findS4Photo", method = RequestMethod.GET)
public void findS4Photo(HttpSession session, HttpServletRequest request, HttpServletResponse response) {
	log.info("==進來處理圖片了==");
	
	// ec/fs4?id=5b9f6a1b5a83c1377c32b058
	try {
		String id= request.getParameter("id");
		
		if (StringUtils.isNotBlank(id)) {
　　　　　　　　
			//根據id取到Base64編碼（自己 Base64 處理的編碼存在數據庫，所以從數據庫中取，自己的存在哪里就從哪里取）　　　　　　　　　　　
			String base64Code = qrcodeService.getQrcodeBase64PhotoById(qrcodeId);

			try {
				response.setContentType("image/*"); // 設置返回的文件類型
				OutputStream toClient = response.getOutputStream();
				generateImage(base64Code, toClient);// 核心處理方法
			} catch (Exception ex) {
				System.out.println(ex.toString());
			}

		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	log.info("==結束處理圖片了==");
}

處理方法：

public static boolean generateImage(String base64Code, OutputStream out) {

	// 圖像數據為空
        if (base64Code == null || "".equals(base64Code)){
                return false;
        }
	BASE64Decoder decoder = new BASE64Decoder();
	try {
		// Base64解碼
		byte[] b = decoder.decodeBuffer(base64Code);
		for (int i = 0; i < b.length; ++i) {
			if (b[i] < 0) {// 調整異常數據
				b[i] += 256;
			}
		}
		// OutputStream out = new FileOutputStream(imgFilePath);
		out.write(b);
		out.flush();
		out.close();
		return true;
	} catch (Exception e) {
		return false;
	}
}

 最后稍微提一下：前端 url 路徑由於直接訪問后台，可以做一下加密處理，包括傳的參數 id 。如果有需要的話。