前端將圖片二進位制流顯示在html端
阿新 • • 發佈：2019-01-27
工作中碰到的問題，在處理介面返回的驗證碼圖片時，由於返回的是encode編碼程式碼，在js端獲取到資料之後，通過函式encodeURI()來進行解碼，之後可以通過在src中設定來實現圖片顯示：
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0...">
實現方法：
在src前新增data:image/jpeg;base64,+已經encode的二進位制程式碼，就可以在網頁端顯示出圖片，效果如圖：
不過這麼長串的二進位制字元直接展示在html裡實在不是上上之選，希望有條件的話可以讓後臺進行轉碼，直接獲取src地址才是相對友好的方法。