Image to Base64 帶入img的src內顯示

 承之前的狀況，HTML TO PDF的做法近期使用者回報圖檔會有缺圖的問題，這再開發環境並未發現但正式環境再轉檔當下若載圖有狀況就會有此問題，故調整作法直接把圖放在HTML內改善。

不過缺點顯而易見的是轉Base64那頁面的SIZE會大增，若照片多等待時間就變得更久了...不過照片多再轉PDF也是得等待故有逾時，若是再瀏覽器顯示因為有快取機制所以只有第一次得等...這就不好比較!

HTML:
<div class="flex-row" >
    <c:if test="${pic.status==true}">
<img  style="height:300px;max-width:500px;width: expression(this.width > 500 ? 500: true);" src='data:image/jpg;base64, ${pic.picbase64}' ></img><br>
    </c:if>
  </c:forEach>
</div>

  <c:forEach var="pic" items="${piclist}">

JAVA:

//轉base64 string

Base64.Encoder encoder = Base64.getEncoder();

pic.setPicbase64(encoder.encodeToString(blob.getBytes(1, (int) blob.length())).trim());

小計:

data:image/jpg; base64, 紅字處實測png, jpeg ... 只要是圖都會正確顯示，所以不用特別去抓副檔名來放，但保險起見建議還是依照實際的檔案格式來放入相對應的MIME TYPE!