vue後臺返回base64圖片無法顯示的解決
vue後臺返回base64圖片無法顯示
關於後臺接口返回的圖片base64格式頁面無法顯示的問題,我遇到的原因是因為返回的一串內容裡面存在空格或者換行的原因
解決方法如下
let str = `data:image/jpg;base64,${res.imgStr}` this.mpId = str.replace(/[\r\n]/g, '')
let str = `data:image/jpg;base64,${res.imgStr}` this.mpId = str.replace(/[\r\n]/g, '')
這樣界面就能顯示圖片啦。
vue中base64轉圖片格式
// 拍照獲取圖片base64 // imgsrc: base64圖片資源 refreshDataList (imgsrc) { let data = this.baseImg(imgsrc) console.log(data) }, // base64轉圖片資源 baseImg (dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]),n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], {type: mime}) },
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 深入淺出JavaScript中base64編碼原理
- vue將html頁面生成高清晰pdf文件的方法
- vue js中實現圖片壓縮封裝方法
- java實現後臺處理base64圖片還原為文件
- Exif.js圖片旋轉修正的方法