前端將圖片二進制流顯示在html端


工作中碰到的問題,在處理接口返回的驗證碼圖片時,由於返回的是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地址才是相對友好的方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM