1.base64編碼顯示圖片

一般我們後臺給前端傳圖片,有兩種方式,一種就是通過response.getOutputStream直接將圖片以流的形式寫到頁面顯示,另一種就是先把圖片上傳到伺服器,拿到url地址後把url地址給前端

第一種方式簡單,不需要伺服器,但是這種不太符合現在開發的要求,因為我們通常需要在響應的時候,加上額外的欄位表示響應成功狀態,以及錯誤資訊,而直接將圖片作為流寫回前端的話,response是不能攜帶這些引數的. 第二種方法需要有一個伺服器,且上傳圖片又是一個額外的步驟.

這個時候我們就可以將圖片的位元組陣列通過base64編譯後返回前端,前端直接拿了可以顯示為圖片

獲取圖片的位元組陣列看上一篇部落格:

2. 位元組陣列base64編譯

 byte[] bytes;//圖片的位元組陣列
 BASE64Encoder encoder = new BASE64Encoder();
 String data = encoder.encode(bytes);
//data = iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......

3. 前端顯示

前端拿到這個data字串後,有兩種方式顯示圖片

先拼接一下字首, 分別是data:圖片型別 ; 編碼型別, data字串資料

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......

第一種,css方式:

div.image {
    width: 99px;
    height: 42px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
}

第二種,img標籤方式

<img width="900" height="450" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAqCAYAAA...."
 
/>

注意,如果圖片很大的話,轉成的data字串也很長,我這裡一個小圖片直接15w的字元了,所以這種方式適合比如logo,驗證碼這種小圖片,又不希望存在伺服器的應用場景

自己拼接了<img>標籤後,可以在markdown2直接貼上看看效果