vue js中解決二進制轉圖片顯示問題
一:問題
工作中碰到的問題，在處理接口返回的驗證碼圖片時，由於返回的是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...">
二:解決方法
-
js中解決(簡單粗暴)
實現方法：在src前添加data:image/jpeg;base64,+已經encode的二進制代碼，就可以在網頁端顯示出圖片
以下是用vue實現的代碼
this.filePath = 'data:image/jpeg;base64,' + row.imageBlob
<img :src="'data:image/jpeg;base64,'+row.imageBlob" style="width:50%;height:50%" @click="handleLookAt(row)">
2. 如果圖片文件多且大,還是選用文件服務器最為穩妥,可以簡單的創建一個ftp服務器,后端處理圖片存在ftp上,返回一個ftp的地址即可
不過這么長串的二進制字符直接展示在html里實在不是上上之選，希望有條件的話可以讓后台進行轉碼，直接獲取src地址才是相對友好的方法。